悬停其他菜单项时隐藏活动子菜单答案

【问题标题】：Hide active submenu while hovering other menu items悬停其他菜单项时隐藏活动子菜单
【发布时间】：2012-12-13 20:07:11
【问题描述】：

我正在使用 css 类：

#navbar .current-menu-ancestor ul.sub-menu {display:inline;}

使其页面的子菜单具有粘性。

如果我悬停在其他顶级菜单项上，我需要隐藏它（通过 jQuery）。

示例：

热门项目 1
- 菜单 1a
- 菜单 1b
热门项目 2
热门项目 3
- 菜单 3a
- 菜单 3b
- 菜单 3c

如果我在菜单 1b 页面上，我现在显示了 Top Item 1 的所有子菜单。
当我将鼠标悬停在 Top Item 3 上以显示其子菜单并隐藏“活动”子菜单时，我需要它。

（这些是具有透明背景的水平子菜单...）

【问题讨论】：

如果您将代码放在 jsFiddle 上以显示什么不起作用，那将非常有帮助。
我你有兴趣为此使用插件然后检查一下tripwiremagazine.com/2012/12/jquery-menu-plugins.html 这些菜单栏附有很好的动画和 css...

标签： jquery menu navbar

【解决方案1】：

绑定到.mouseleave() 事件。类似于

$('.main_menu_container').mouseleave( function () {
    $(this).children('.submenu').hide();
});

【讨论】：

【解决方案2】：

通过 CSS 实现这一点的方法可能更可行。

Red Team Design.com 发布了一些非常流行的实现目标的方法：

这是一个很好的例子，它们也提供了有用的教程。但是，如果您绝对必须使用 jquery（例如，如果这是某种赋值），我会坚持点击事件以避免复杂的代码，那么我真的很懒 :)

您可以轻松地执行以下操作：

演示：http://jsfiddle.net/jrb9249/5n5Bp/4/

HTML：

<html>
    <body>
        <div class="div_parent">
            <ul class="top_menu">
                <li><a href="#">Home</a></li>
                <li id="shop_li"><a href="#" onClick="javascript:mouseEvent('#shop_div')">Shop</a>
                    <div class="sub_div" id="shop_div">
                        <ul id="shopmenu" class="sub_menu">
                            <li>Electronics</li>
                            <li>Software</li>
                            <li>Mail-Order Brides</li>
                            <li>Insert bazaar product here</li>
                        </ul>
                    </div>
                </li>
                <li id="contact_li"><a href="#" onClick="javascript:mouseEvent('#contact_div')">Contact Us</a>
                    <div class="sub_div" id="contact_div">
                            <ul id="contactmenu" class="sub_menu">
                                <li>Email</li>
                                <li>Phone</li>
                            </ul>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

Javascript：

var anim;

$(document).click(function(event){
    if(event.target.nodeName != 'LI' && (anim==0)){
        $('.sub_div').fadeOut('fast');
    };
});

anim = 0;
function mouseEvent(myid){
    $('.top_menu li > div').each(function(){
        $(this).fadeOut('fast');
    });
    anim = 1;
    $(myid).fadeIn('fast', function(){
        anim = 0;
    });
};

CSS：

.div_parent
{
    background:transparent;
    padding:5px;
    margin:0px;
    float:left;
    border:solid 1px gray;
}

.sub_div
{
    paddin:0px;
    margin:0px;
    position:absolute;
    margin-top:3px;
    display:none;
}


.top_menu, .sub_menu
{
    margin:0px;
    padding:0px;
    background:transparent;
}

.top_menu li
{
    float: left;
    display:inline;
    margin:0px 5px 0px 5px;
}

a:link,a:active,a:visited
{
    color:blue;
    text-decoration:none;
}

a:hover
{
    text-decoration:underline;
}

.sub_menu li
{
    clear:both;
    float:left;
    background:#E2EDD5;
    border:solid 1px white;
    padding:2px;
    width:150px;
}

.sub_menu li:hover
{
    cursor:pointer;
    background:#FFFFE8;
}

这使用jquery的fadeOut动画（简单）和变量“anim”来避免打开和关闭表单之间的冲突。 CSS 会为你整理好一切。我尝试在这个演示中尽可能多地使用 jquery。我希望它有所帮助。祝你好运。

【讨论】：