实现功能：
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>
-----上传了源文件，有需要的自己下载下来看看吧！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
