Question

水平下拉菜单有两个问题。我希望它显示活动网页的下拉区域。另外，我想在用户意外离开菜单时添加时间延迟以隐藏菜单，这样它就不会消失。

我的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秒，但返回活动页面下拉菜单。但是，当我在第二秒内再次进入下拉菜单时，它仍然会消失。

有人可以指出我在这里缺少什么吗？

Answer 1

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

修改

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

jquery dropdown li不会消失

1 个答案: