Question

您好我正在尝试为网站创建一个水平菜单栏，其下方有子菜单，这是合理的（至少是顶级项目）。

这个想法是，当在主页上时，顶级项目是可见的，当悬停在顶级项目上时我希望项目改变颜色并且子菜单变得可见，然后当将鼠标悬停在子菜单上时这些应该改变颜色。这一切似乎都很好。

我正在努力的是，一旦我点击顶级项目并且我被带到该页面，我需要该项目的子菜单保持可见，直到我将鼠标悬停在任何其他顶级项目上（如在我所拥有的空间中重叠。我可以想到实现这一点的唯一方法是使用jQuery在悬停在其他顶级项目上时隐藏活动子菜单，但问题是即使将鼠标悬停在“活动”选项上，子菜单也会隐藏。

我试图用css实现我的目标，但我开始认为它不可能，这就是为什么我现在正在看jQuery选项，但现在我也被困在这里了！我可能会大量过分复杂的事情。

我做了一个小提琴来帮助我解释我的目的：

http://jsfiddle.net/vLZv7/

这就好像您选择了第一个顶级项目，而现在您正在使用“parent1.html”

非常感谢任何帮助或指导。

我的代码：

<div class='menu'>
<ul>
    <li class='active'><a href="#">Parent 1</a>
    <ul>
        <li><a href="#">Sub 1-1</a></li>
        <li><a href="#">Sub 1-2</a></li>
        <li><a href="#">Sub 1-3</a></li>
    </ul>
    </li>
    <li><a href="what-we-do.php">Parent 2</a>
    <ul>
        <li><a href="#">Sub 2-1</a></li>
        <li><a href="#">Sub 2-2</a></li>
        <li><a href="#">Sub 2-3</a></li>
    </ul>
    </li>
    <li><a href="#">Parent 3</a>
    <ul>
        <li><a href="#">Sub 3-1</a></li>
        <li><a href="#">Sub 3-1</a></li>
    </ul>
    </li>
</ul>
</div>

CSS：

.menu ul{
    text-align:justify;
    width:300px;
    min-width:500px;
    margin-top:60px;
}
.menu ul:after{
    content:'';
    display:inline-block;
    width:100%;
}
.menu ul li{
    display:inline-block;
    list-style:none;
    white-space:nowrap;
    margin:0;
    padding:0;
}
.menu ul li a{
    text-decoration:none;
    color:#000;
}
.menu ul li:hover a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
    display:none;
}

.menu ul li:hover ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu ul li:hover ul li a{
    color:#000;
    border:none;
    margin-right:25px;
}
.menu ul li:hover ul li:hover a{
    color:#CCCC00;
}
.menu li.active a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu li.active ul li a{
    color:#000;
    margin-right:25px;
    border-bottom:none;
}
.menu li.active ul li:hover a{
    color:#CCCC00;
    margin-right:25px;
}
.hide{
    display:none;
}

简单的jQuery：

$('.menu').hover(
function(){ $('.menu li.active ul li a').addClass('hide') },
function(){ $('.menu li.active ul li a').removeClass('hide') }
)

Answer 1

不比

简单

$('.menu li:not(.active)').hover(
    function(){ $('.menu li.active ul li a').addClass('hide') },
    function(){ $('.menu li.active ul li a').removeClass('hide') }
)

Answer 2

您可以更改触发事件的选择器以匹配li元素，如下所示：

$('.menu li').hover( ......

然后unbind() .active项的悬停操作：

$('.menu li.active').unbind('mouseenter mouseleave');

http://jsfiddle.net/vLZv7/7/

css javascript菜单子菜单问题

2 个答案: