5

在这里，我以我的菜单jsfiddle 为例。所以我有带有下拉菜单的水平菜单，但我需要的是 - 首先li应该在页面加载时展开（这并不难），当我将鼠标悬停在任何其他元素上时，它应该显示当前展开的内容（如果我mouseleave当前元素应该是展开）。

这是我将鼠标悬停在鼠标离开时的情况，Item2它Item2应该保持这样的状态：

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

更新：

我设法做到了，但除了例外，这里是JSFiddle上的链接

它可以按我的意愿工作，但是当我单击链接时，Item1或者调用函数，并且再次处于活动状态时，我需要以某种方式设置活动链接单击的链接，Item2init()Item1

例如，如果我单击一个Item3链接，它会将我重定向到 Item3 页面，并且此链接在菜单中处于活动状态。（ Jsfiddle上的所有代码）

4

3 回答 3

6

如果我正确理解您的问题，问题是您需要调用 init 函数来重绘所有内容，但同时您将 item1 设置为当前；如果您刚刚按下链接 2，这是不行的。

如果认为您的解决方案应该是几乎删除所有初始化代码。所有这些都可以在 css 样式中完成，大大简化了您的代码。

您将活动设置为项目。（您已经在锚点中执行此操作，在 li 中执行此操作）。然后，把所有的外观样式放在css中，你的脚本就变小了。

不需要在子项上设置活动。你可以设置像li.active li这样的规则；即，作为活动 li 的后代的 li。

完成所有这些操作后，您就可以完全避免使用 init 函数。

添加小提琴

我在更新的小提琴中改变了它

我将可见项目菜单标记为“当前”，我发现“活动”对类名感到困惑。一定要在li中，而不是在the中，这样才能影响到二级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;
}
于 2013-02-02T08:16:23.737 回答
2

我在想，您可能会对以活动状态为目标的 URL 感兴趣。您可以使用 JavaScript 获取当前路径window.location.pathname。您可以使用以下方法检查 jQuery：

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

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

于 2013-02-05T03:38:29.957 回答
2

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

ul.menu li.expanded ul {
  position: relative;
  display: block;
  top: 20px;
  background-color: orange;
}
于 2013-01-31T11:42:00.407 回答