Css菜单,不要在悬停时隐藏当前菜单链接

Question

这里我举了一个菜单jsfiddle的例子.所以我有水平菜单下拉,但我需要的是 - 在页面加载首先li应该扩展(这不是很难),当我悬停在任何其他元素时,它应该显示当前扩展的内容(如果我mouseleave当前元素应该是扩展).

这是我悬停在Item2和mouseleave 上的情况,Item2它应该像这样:

Item1       Item2          Item3
            |||||
subItem2.1  subItem2.2 subItem2.3

更新:

我设法做到了,但有一个例外,这是JSFiddle上的链接

它按我想要的方式工作,但当我点击一个链接Item1,或者Item2,init()函数被调用,然后Item1再次激活,我需要以某种方式设置活动链接 - 点击一个,

例如,如果我点击一个Item3链接,它会将我重定向到Item3页面,此链接在菜单中处于活动状态.(Jsfiddle上的所有代码)

Answer 1

如果我正确理解你的问题,问题是你需要调用init函数来重绘所有,但同时你将item1设置为current; 如果您刚刚按下link2,这就不行了.

如果认为你的解决方案应该几乎删除所有的init代码.所有这些都可以在css样式中完成,简化了很多代码.

你将活动设置为项目.(你已经在锚中做了这个,在li中做).然后,将所有外观样式放在css中,并减少脚本.

不需要在子项目上设置活动.你可以设置像li.active li这样的规则; 也就是说,li是活跃li的后代.

完成所有这些后,您可以完全避免使用init函数.

添加小提琴

我在更新的小提琴中改变了这一点

我正在将可见项目菜单标记为"当前",我发现"主动"让类名混淆.它必须在li而不在,因此它可以影响第二级lis

现在剧本就是

$(document).ready(function() {
    $("#menu_item ul.menu li.expanded").mouseover(function(){
        var previous = $('.current');
        previous.removeClass('current');          
        $(this).addClass('current');
    });
});

我只是从前一个当前元素中删除当前元素,并将其添加到新元素中.

初始选择仅在标记中

<div id="menu_item">
    <ul class="menu">
        <li class="expanded first current">
        <a href="#" title="">Item1</a>

而新的css规则是:

#menu_item > ul.menu > li.current  {
    background-color: orange;
}
#menu_item ul.menu li ul {
    display: none;
}
#menu_item ul.menu li.current ul {
    display: block;
}