2

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

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

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

4

1 回答 1

0

我在这里设置了一个 jsFiddle 。你<ul id="mainnnav">的名字错了。它应该被命名为“mainnav”。

编辑

我刚刚更新了 jsFiddle。我添加了代码以首先隐藏所有子导航，然后显示当前活动的子导航。基础设施 ID 选择器需要设置为“基础设施”。

于 2013-04-30T11:59:50.310 回答