この質問がすでに何度も出されていることは知っていますが、これまでのところ、ドロップダウン メニューを機能させることができません。メニューが表示されるまでの遅延を設定すると、問題が発生します。 setTimeout なしでは、メニューは正常に機能します。誰でも見て解決策を提案してもらえますか?また、IE6で動作することを試みています。
setTimeout を使用した完全な例を次に示します: http://jsbin.com/ovoyon/1/ (バグがあり、正しく動作しない、ドロップダウンがスタックする、遅延が認識されない)
これはsetTimeout http://jsbin.com/isamay/1/のない作業バージョンです
ここにコードコピーがあります:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<style>
body {margin:60px; font-family: sans-serif; font-size:12px;}
ul,ul ul {margin:0;padding:0;}
ul li {
position:relative;
list-style-type: none;
padding:5px 0;
margin:0 10px;
cursor:pointer;
border-bottom:1px solid #ddd;
display:inline-block;
float:left;
}
.submenu {
background:#eee;
display:none;
position:absolute;
width:200px;
top:25px;
left:0;
margin-left:-5px;
}
.hover {
display:block !important;
}
</style>
</head>
<body>
<nav id="navigation">
<ul>
<li class="drop">Option 1
<div class="submenu">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>
</div>
</li>
<li class="drop">Option 2
<div class="submenu">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>
</div>
</li>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
(function(){
var topNav = $('#navigation'),
drop = topNav.find('.drop'),
myTimer;
drop.hover(function(){
obj = $(this);
subMenu = obj.find('.submenu');
subMenu.addClass('hover');
clearTimeout(myTimer);
},function(){
myTimer = setTimeout(function(){
subMenu.removeClass('hover');
},300);
});
})();
});
</script>
</body>
</html>