下拉菜单jquery
问题描述:
我试图做类似aoro dot ro的下拉菜单。在铬,safari,IE6似乎工作,但我在Mozilla Firefox 3.6我有一些问题。如果我将光标移动到快速,我的下拉菜单消失。我认为这个问题是从第一元素的儿童。 在这一刻,我不要错过t know what i
。谢谢。下拉菜单jquery
代码如下:
<div class="navigator">
<ul>
<li id="for_her"><a href="#" title="I`Parfumuri.ro | Parfumuri pentru EA"><span class="fpi"></span> Parfumuri pentru ea</a></li>
<li id="for_him"><a href="#" title="I`Parfumuri.ro | Parfumuri pentru EL"><span class="mpi"></span> Parfumuri pentru el</a></li>
<li id="gifts"><a href="#" title="I`Parfumuri.ro | Seturi cadou"><span class="sci"></span> Seturi Cadou</a>
<div class="under_menu" style="display:none;">
<div class="vertical_r">
<h5>Cadouri pentru ea</h5>
<ul>
<li><a href="#">Produs 1</a></li><li><a href="#">Produs 2</a></li></ul></div>
<div class="vertical_r">
<h5>Cadouri pentru el</h5>
<ul>
<li><a href="#">Produs 1</a></li><li><a href="#">Produs 2</a></li></ul></div>
</div>
</li>
</ul>
</div>
$("#gifts").mouseover(function(){
$(this).children().show();
});
$("#gifts > .under_menu").children().mouseover(function(){
$("#gifts > .under_menu").show();
});
$(document).bind('mouseout',function(e){
var click1 = $(e.target).attr('id');
var click2 = $(e.target).attr('class');
if(click1 != "gifts" || click2 != "under_menu"){
$(".under_menu").hide();
}
});
答
我认为问题是,你有一点点的竞争条件怎么回事。
如果你从一个孩子移动到另一个孩子(#gifts),那么你有一个mouseout和mouseover被触发。如果鼠标最后触发,则隐藏整个菜单。
你应该做的就是实现一个超时时间为200ms的例子),并且在调用鼠标悬停的时候清除该超时。
那样mouseout会花费0.2s来触发 - 大量的时间让下一个mouseover事件触发。
所以...感谢您的建议。现在似乎在Mozila Firefox 3.6中工作正常。我没有太多的JavaScript经验。 –