Question

我正在使用css类：

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

使其页面的子菜单变得粘稠。

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

示例：

Top Item 1     - 菜单1a
    - 菜单1b
顶部项目2
顶部项目3
    - 菜单3a
    - 菜单3b
    - 菜单3c

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

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

Answer 1

有很多方法可以通过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。我希望它有所帮助。祝你好运。

Answer 2

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

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

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

2 个答案: