您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
实现功能：
1、简单的Jquery二级导航栏，+上时间函数控制，能够防乱滑动的BUG漏动！
Jquery代码：
<script type="text/javascript" language="javascript">
jQuery(document).ready(function($) {
var delayTime = [];
jQuery('#menu li').each(function(index) {
$(this).hover(function() {
var _self = this;
delayTime[index] = setTimeout(function() {
$(_self).find('.main').slideDown(200)
},
400)
},
function() {
clearTimeout(delayTime[index]);
$(".main").slideUp(200)
})
});
});
</script>
HTML代码：
<body>
<ul id="menu">
<li>导航1
<div class="main">内容1</div>
</li>
<li>导航2
<div class="main">内容2</div>
</li>
<li>导航3
<div class="main">内容3</div>
</li>
<li>导航4
<div class="main">内容4</div>
</li>
</ul>
</body>
CSS代码：
<style type="text/css">
<!--
body{margin:0; padding:0;}
#menu {
float: left;
list-style-type: none;
}
#menu li {
height: 40px;
width: 200px;
float: left;
line-height: 40px;
text-align: center;
background-color: #ccc;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #fff;
position: relative;
cursor:pointer;
font-family: "微软雅黑";
}
#menu li .main {
position: absolute;
left: 0px;
top: 0px;
background-color: #FF9;
height: 300px;
width: 200px;
display: none;
}
-->
</style>
-----上传了源文件，有需要的自己下载下来看看吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。