溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
實現功能：
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
