我正在 jquery 中制作菜单。您可以在http://mywash.dk/testtest/index.html看到它
从一开始显示的子菜单(在“Hvordan”下方)是活动菜单,因此它应该始终显示(除非您将鼠标悬停在另一个菜单项上,在这种情况下应该显示另一个子菜单。
它工作正常,但有 1 个烦人的错误。当您从“Hvad”悬停到“Hvem”时,它会快速显示并隐藏活动菜单,然后再显示它应该显示的菜单。
知道为什么会这样吗?
非常感谢你的帮助!
查询:
$(document).ready(function() {
$('#menu > ul > li:not(.inpath) ul').hide();
$('#menu .inpath ul').show();
$('#menu > ul > li:not(.inpath)').hover(
function() {
$('ul', this).show("slide", { direction: "left" }, 400);
if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li')){
$('#menu li.inpath ul').hide("slide", { direction: "left" }, 400);
}
}, function() {
$('ul', this).hide("slide", { direction: "left" }, 400);
if($('#menu li.inpath ul').is(':hidden') && $(this).not('#menu ul li')){
$('#menu li.inpath ul').show("slide", { direction: "left" }, 400);
}
});
});
html:
<div id="menu">
<ul>
<li class="test"><a href="">Hvem</a>
<ul>
<li class="first-item"><a href="index.html">Submenu</a></li>
</ul>
</li>
<li class="test"><a href="">Hvad</a>
<ul>
<li class="first-item"><a href="index.html">Produkter</a></li>
<li class="activeitem"><a href="cases.html" >Leveringer</a></li>
</ul>
</li>
<li class="inpath test"><a href="">Hvordan</a>
<ul>
<li class="first-item"><a href="">Reklame</a></li>
<li><a href="">PR</a></li>
<li><a href="">Websites</a></li>
<li><a href="">Illustrationer</a></li>
</ul>
</li>
<li class="last-item test"><a href="">Sådan!</a></li>
</ul>
<div class="clear"><!--clearfix--></div>
</div>