jquery - css javascript 菜单子(monad)菜单问题

Question

您好，我正在尝试为一个网站创建一个水平菜单栏，该菜单栏下方有子菜单并且是合理的(至少是顶级元素)。

这个想法是，当在主页上时，顶级元素是可见的，当鼠标悬停在顶级元素上时，我希望该元素改变颜色并且子菜单变得可见，然后当鼠标悬停在子菜单上时，这些应该改变颜色。这一切似乎工作正常。

我遇到的问题是，一旦我单击顶级元素并进入该页面，我需要该元素的子菜单保持可见，直到我将鼠标悬停在任何其他顶级元素上(作为在我所拥有的空间中重叠)。我能想到的实现这一点的唯一方法是在将鼠标悬停在其他顶级元素上时使用 jQuery 隐藏事件子菜单，但问题是即使将鼠标悬停在“事件”选择上时子菜单也会隐藏。

我试图只用 css 来实现我想要的，但我开始认为这是不可能的，这就是为什么我现在正在考虑 jQuery 选项，但现在我也被困在这里了!我可能把事情复杂化了很多。

我做了一个 fiddle 来帮助解释我的意思:

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') }
)