Question

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

当我将鼠标悬停在Item2上并且鼠标离开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函数。

添加小提琴

我在更新后的fiddle

中对此进行了更改

我正在将可见项目菜单标记为“当前”，我发现“主动”混淆了类名。它必须在li中，而不是在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;
}

Answer 2

你应该改变你的风格，而不是正常工作。

ul.menu li.expanded ul {
  position: relative;
  display: block;
  top: 20px;
  background-color: orange;
}

Answer 3

我在想，可能是您感兴趣的网址定位活动状态。您可以使用window.location.pathname获取当前使用JavaScript的路径。您可以使用以下内容检查jQuery：

$(".first a[href=" + window.location.pathname + "]").addClass('active');

这会将活动类添加到.first中与当前路径具有相同href属性的所有锚点。您可能需要修剪前导斜杠。

请查看active states上的这篇文章。
您可能也对jQuery UI tabs感兴趣。
这是标准练习中的另一个jQuery UI tabs。

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

3 个答案: