js函数怎么写:下拉菜单下拉菜单0_0
发布网友
发布时间：2022-04-30 07:09
共3个回答
热心网友
时间：2022-05-16 02:12
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js菜单演示_怎么使用js_js下拉菜单_简单js下拉菜单_怎么做js下拉菜单</title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body {font-family: arial, 宋体, serif;font-size:12px;}
#nav {line-height: 24px; list-style-type: none; background:#666;}
#nav a {display: block; width: 80px; text-align:center;}
#nav a:link {color:#666; text-decoration:none;}
#nav a:visited {color:#666;text-decoration:none;}
#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}
#nav li {float: left; width: 80px; background:#CCC;}
#nav li a:hover{background:#999;}
#nav li ul {line-height: 27px; list-style-type: none;text-align:left;left: -999em; width: 180px; position: absolute;}
#nav li ul li{float: left; width: 120px;background: #F6F6F6;}
#nav li ul a{display: block; width: 100px;text-align:left;padding-left:20px;}
#nav li ul a:link {color:#666; text-decoration:none;}
#nav li ul a:visited {color:#666;text-decoration:none;}
#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}
#nav li:hover ul {left: auto;}
#nav li.onhover ul {left: auto;}
#content {clear: left;}
</style>
<script type="text/javascript">
function menu() {
var oLi = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<oLi.length; i++) {
oLi[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "onhover";
};
oLi[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "onhover";
}
oLi[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "onhover";
};
oLi[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)onhover\b"),"" );}}}
window.onload=menu;
</script></head>
<body>
<ul id="nav">
<li><a href="http://jingyan.baidu.com/article/fc07f98917a56f12ffe5198a.html" target="_blank" >动漫之家</a>
<ul>
<li>
<a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >下拉一</a></li>
<li><a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >下拉二</a></li>
<li><a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >下拉三</a></li>
<li><a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >下拉四</a></li>
</ul></li><li><a href="http://jingyan.baidu.com/article/e73e26c0cfa01724adb6a795.html" target="_blank" >js详解</a><ul>
<li><a href="http://jingyan.baidu.com/article/e73e26c0cfa01724adb6a795.html" target="_blank" >下拉一</a></li>
<li><a href="http://jingyan.baidu.com/article/e73e26c0cfa01724adb6a795.html" target="_blank" >下拉二</a></li>
<li><a href="http://jingyan.baidu.com/article/e73e26c0cfa01724adb6a795.html" target="_blank" >下拉三</a></li>
<li><a href="http://jingyan.baidu.com/article/e73e26c0cfa01724adb6a795.html" target="_blank" >下拉四</a></li></ul></li>
<li><a href="http://jingyan.baidu.com/article/08b6a591f09cfc14a8092293.html" target="_blank" >js运用</a>
<ul><li><a href="http://jingyan.baidu.com/article/08b6a591f09cfc14a8092293.html" target="_blank" >下拉一</a></li>
<li><a href="http://jingyan.baidu.com/article/08b6a591f09cfc14a8092293.html" target="_blank" >下拉二</a></li>
<li><a href="http://jingyan.baidu.com/article/08b6a591f09cfc14a8092293.html" target="_blank" >下拉三</a></li>
<li><a href="http://jingyan.baidu.com/article/08b6a591f09cfc14a8092293.html" target="_blank" >下拉四</a></li></ul></li>
<li><a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >关于我们</a>
<ul><li><a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >下拉一</a></li>
<li><a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >下拉二</a></li>
<li><a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >下拉三</a></li>
<li><a href="http://jingyan.baidu.com/article/363872ecedf4486e4ba16f92.html" target="_blank" >下拉四</a></li>
</ul></li><li><a href="http://jingyan.baidu.com/article/cdddd41c5e873153cb00e193.html" target="_blank" >js在线演示</a>
<ul><li><a href="http://jingyan.baidu.com/article/cdddd41c5e873153cb00e193.html" target="_blank" >下拉一</a></li>
<li><a href="http://jingyan.baidu.com/article/cdddd41c5e873153cb00e193.html" target="_blank" >下拉二</a></li>
<li><a href="http://jingyan.baidu.com/article/cdddd41c5e873153cb00e193.html" target="_blank" >下拉三</a></li>
<li><a href="http://jingyan.baidu.com/article/cdddd41c5e873153cb00e193.html" target="_blank" >下拉四</a></li></ul></li>
<li><a href="http://jingyan.baidu.com/article/76a7e409bb3c33fc3b6e1593.html" target="_blank" >联系我们</a>
<ul><li><a href="http://jingyan.baidu.com/article/76a7e409bb3c33fc3b6e1593.html" target="_blank" >下拉一</a></li>
<li><a href="http://jingyan.baidu.com/article/76a7e409bb3c33fc3b6e1593.html" target="_blank" >下拉二</a></li>
<li><a href="http://jingyan.baidu.com/article/76a7e409bb3c33fc3b6e1593.html" target="_blank" >下拉三</a></li>
<li><a href="http://jingyan.baidu.com/article/76a7e409bb3c33fc3b6e1593.html" target="_blank" >下拉四</a></li></li></ul>
</body>
</html>
热心网友
时间：2022-05-16 03:30
菇凉甭纠结,把html页面代码发一下,小的帮你弄
先试试这个页面,看看效果是不是你们想要的.
<html><head>
<script src="jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
$(function(){
var t;
$(".static-menu li:eq(0)").hover(function(){
t = setTimeout(
function(){
$("#proct-list").show();
},300);
},function(){
if(t)clearTimeout(t);
$("#proct-list").hide();
});
});
</script>
<style type="text/css">
.static-menu li{
background:#ffceaa
}
</style>
</head>
<body>
<ul class="static-menu">
<li>这个是一级菜单</li>
</ul>
<ul id="proct-list" style="display:none">
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
</ul>
</body>
</html>
追问t什么时候为真呢
追答鼠标放上去的时候为真
热心网友
时间：2022-05-16 05:04
不用担心哈，有不晓得的加我企.鹅 261039475。写了个简单的，看看这个要得不。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script language="JavaScript">
$(function(){
var seconds;
$(".static-menu").children("li").hover(function(){
var $this = $(this);
seconds = setTimeout(function(){
$this.find("ul").slideDown();
},300)
},function(){
if(seconds) {
clearTimeout(seconds);
}
$(this).find("ul").slideUp();
})
})
</script>
<style type="text/css">
*{font-family: "microsoft yahei";}
.static-menu{
width: 906px;
margin: 0 auto;
height: 35px;
border:1px solid #CCC ;
border-left:none ;
padding: 0;
}
.static-menu > li {
display: block;
float: left;
width: 150px;
height: 35px;
line-height: 35px;
text-align: center;
border-left: 1px solid #CCC;
}
#proct-list{width: 150px;border: 1px solid #ccc;border-top:none;padding: 0;height: 115px;margin-left: -1px;}
#proct-list li{list-style: none;}
</style>
</head>
<body>
<ul class="static-menu">
<li>这个是一级菜单1
<ul id="proct-list" style="display:none">
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
</ul>
</li>
<li>这个是一级菜单2
<ul id="proct-list" style="display:none">
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
</ul>
</li>
<li>这个是一级菜单3
<ul id="proct-list" style="display:none">
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
</ul>
</li>
<li>这个是一级菜单4
<ul id="proct-list" style="display:none">
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
</ul>
</li>
<li>这个是一级菜单5
<ul id="proct-list" style="display:none">
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
</ul>
</li>
<li>这个是一级菜单6
<ul id="proct-list" style="display:none">
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
<li>这个是二级菜单</li>
</ul>
</li>
</ul>
</body>
</body>
</html>
追问second什么时候为真呢
追答seconds是一直都为真的，只要你鼠标滑进去过，就肯定会触发setTimeout(),那么seconds就肯定存在，这里是可以不加判断的，只是加一个判断主要是更严谨些。这里你应该关心的是为什么要clearTimeout().因为鼠标滑进去的时候就开始计时了，300毫秒，如果已经计时200毫秒的时候我们就把鼠标拿开了，那么如果不clearTimeout(),计时会继续。再过100毫秒就触发$this.find("ul").slideDown();就是setTimeout()里面的事件了，如果鼠标在拿开的时候clearTimeout()，就不会继续触发。如果不懂，可以加我企鹅哈。
