css javascript菜单子菜单问题

嗨我想创建一个网站的水平菜单栏，将有子菜单下，它是合理的（至少是顶级项目）。css javascript菜单子菜单问题

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

我一直在努力的是有一次，我点击顶级项目，我被带到该页面，我需要该项目的子菜单保持可见状态，直到我将鼠标悬停在任何其他顶级项目上（如我得到的空间重叠）。我认为实现这一目标的唯一方法是使用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') } 
)

来源

2014-01-23 user3095078

__“我一直在努力的是，当我点击顶级项目并且我被带到那个页面时，我需要该项目的子菜单保持可见，直到我将鼠标悬停在任何其他顶级项目上（如重叠在我得到的空间）。 “__我不确定你想要达到什么效果，如果你离开页面，有什么好处可以让”旧“页面子菜单可见？ –

没有简单得多

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

来源

2014-01-23 15:38:19

+1不错，没有想到它。。:) – DaniP

您可以更改触发事件来匹配li元素这样的选择：

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

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

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

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

来源

2014-01-23 15:38:42 DaniP

css javascript菜单子菜单问题

回答

相关问题