jquery dropdown li不会消失

我有两个水平下拉菜单的问题。我希望它显示活动网页的下拉区域。此外，我想添加一个时间延迟隐藏菜单，当用户离开菜单意外，以便它不会消失。jquery dropdown li不会消失

我的HTML：

<ul id="mainnnav"> 
<li id='home'> 
    Home 
</li> 
<li> 
    Contact 
    <ul class="subnav"> 
     <li id = 'Adress'>Adress</li> 
     <li id = 'Telephone'>Telephone</li> 
     <li id = 'Email'>E-mail</li> 
    </ul> 
</li> 
<li> 
    Services 
    <ul class="subnav"> 
     <li id = 'Land'>Land</li> 
     <li id = 'Infrastructure'>Infrastructure</li> 
     <li id = 'Construction'>Construction</li> 
    </ul> 
</li> 
<li> 
    The company 
    <ul class="subnav"> 
     <li id = 'About'>About</li> 
     <li id = 'History'>History</li> 
     <li id = 'Media'>Media</li> 
    </ul> 
</li> 
</ul>

我的jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
var activepage = 'infrastructure' 
var activesubli = $('li#'+ activepage); 
var activemainli = activesubli.parents('li'); 
var pagesub = activesubli.parent('.subnav'); 
var timer; 
var latest; 

$('#mainnav li').hover(function() { 
    $('ul:first',this).show(); 
    clearTimeout(timer); 
}, function() { 
    latest = $('ul:first', this); 
    timer = setTimeout(function() { 
     latest.hide(); 
        pagesub.show(); 
    }, 1000); 
}); 
}); 
</script>

问题1：所以我想达到的目标是，当一个客户页面 '基础设施'，他看到了UL在服务前面，当他滚动菜单时，当客户离开菜单时（没有点击菜单项），活动下拉菜单消失但再次显示。问题在于，当客户将鼠标悬停在其他菜单项上时，活动的下拉菜单不会消失，而会停留在后台。

问题2：我面对的另一个问题是定时器的问题。当用户离开菜单时，我希望菜单显示最近一次徘徊的下拉菜单1秒，但要返回活动页面下拉菜单。但是，当我在第二秒内再次进入下拉菜单时，它仍会消失。

有人可以指出我在这里失踪了什么？

来源

2013-04-30 thenoob

我已经成立了一个jsFiddle here。您的<ul id="mainnnav">被误称。它应该被命名为“mainnav”。

编辑

我刚刚更新的jsfiddle。我已经添加了代码来隐藏所有的subnav，然后显示当前活动的。基础结构ID选择器需要设置为“基础结构”。

来源

2013-04-30 11:59:50 wellers

啊我明白了！我拼错了。但是，这似乎并不会导致问题，因为我没有硬编码它。我更新了jsFiddle：我还添加了CSS标记。 – thenoob 2013-04-30 13:31:12

我已更新jsFiddle。悬停现在只适用于mainnav的直接子项目。我也隐藏了悬停的所有subnav，并只显示选定的一个。我不知道这是否是你想要的修复。 – wellers 2013-04-30 14:25:26

这个工程！非常感谢你！ – thenoob 2013-05-01 15:15:30

jquery dropdown li不会消失

回答

相关问题