0

我正在使用一个 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 上以显示其子菜单并隐藏“活动”子菜单时，我需要它。

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

4

2 回答 2

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。我希望它有所帮助。祝你好运。

于 2012-12-28T17:01:50.680 回答
0

绑定到.mouseleave()事件。如同

$('.main_menu_container').mouseleave( function () {
    $(this).children('.submenu').hide();
});
于 2012-12-28T15:14:30.867 回答