css javascript菜单子菜单问题答案

【问题标题】：css javascript menu submenu issuecss javascript菜单子菜单问题
【发布时间】：2014-01-23 15:17:54
【问题描述】：

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

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

我正在苦苦挣扎的是，一旦我单击顶级项目并被带到该页面，我需要该项目的子菜单保持可见，直到我将鼠标悬停在任何其他顶级项目上（因为在我所拥有的空间中重叠）。我能想到的唯一方法是在将鼠标悬停在其他顶级项目上时使用 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') }
)

【问题讨论】：

“我正在苦苦挣扎的是，一旦我点击顶层项目并被带到该页面，我需要该项目的子菜单保持可见，直到我将鼠标悬停在任何其他顶级项目（作为我所拥有的空间中的重叠）。“我不确定你想要实现什么。如果您要离开页面，让“旧”页面子菜单可见有什么好处？

标签： jquery html css menu

【解决方案1】：

不简单

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：