Question

所以当我将鼠标悬停在其他菜单项上时，我试图找到一些脚本来删除活动菜单项上的类。但是当我离开导航时恢复它。棘手的部分是确保在当前活动项目上存在活动子菜单时不触发脚本。

例如，我们有4个菜单项（Main 1，Main 2，Main 3，Main 4）。两个有子菜单（主要2，主要4）。 Main 1当前处于活动状态，并且具有一个名为active的类。当你将鼠标悬停在Main 2上时，子菜单会显示，当Main 2在悬停其子菜单时有一个悬停类和一个hilite类，但现在Main 1又回到了正常库存。现在你离开导航，主要1回到有一个活跃的类，主要2看起来像正常

现在进行相同的设置并使Main 2处于活动状态，默认情况下显示子菜单。当您将鼠标悬停在Main 1 Main 3 Main 4上时，子菜单将关闭，Main 2上的活动类将被删除，但当您离开时，它将返回激活状态并显示其子菜单。现在，如果你将鼠标悬停在Main 2或它的子菜单上，那么该类永远不会改变它保持不变。

我已经搜索了类似的设置，并且找不到任何东西，但是我在之前的问题上找到了什么，可以找到here我把所有的东西扔掉了，没有运气，stopPropagation（）这让我觉得这是这个项目的错误代码，但它在一个截然不同的项目上工作。我对此提出了第二个问题，因为如果它已被标记为已回答，我不确定是否可以在另一个上发帖。

提前致谢，希望我能得到一些帮助泰勒

编辑：此处是jsfiddle here旧脚本的链接更新时间：2011年4月30日

Answer 1

请注意，这只适用于wordpress
请在jsfiddle上发布编辑，而不是在此代码上发布，除非它是主要的

好的，我们终于有了一个工作菜单。我做了一些认真的搜索并找到了解决办法。现在我不确定它是否正确但它的工作方式就像我想要的那样。如果有人想使用它，请随意。它正在与WordPress一起使用，所以我有一个函数来添加几行代码，并将在下面发布。

这是我添加到WordPress的功能：

function additional_active_item_classes($classes = array(), $menu_item = false){

    if(in_array('current-menu-item', $menu_item->classes)){
        $classes[] = 'active active-menu';
    }
    return $classes;
}  
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

以上代码适用于wordpress 3.0 +

这会在当前菜单项

中添加一个类

到目前为止jquERY我有点添加了一组东西，并且可能有一种方法将它们合并在一起并使其作为一个工作但我不知道如何做到这一点但是在这里发布代码不好jsfiddle的演示

这是我拼凑在一起的jQUERY脚本，它将添加演示中的效果：

这会为所有父级＆amp; amp;添加一个.not-active类。非父项：

$('*:not(li) > ul#navbar > li').addClass('not-active');

这会为所有ul.sub菜单添加一个.child菜单类：

$('ul.sub-menu').children().addClass('child-menu');

这会将.first-child类添加到每个子菜单中的第一个子项（添加额外样式）：

$('#navbar ul.sub-menu :first-child').addClass('first-child');

这会将.last-child类添加到每个子菜单中的最后一个子项（添加了额外的样式）：

$('#navbar ul.sub-menu :last-child').addClass('last-child');

这将在活动菜单上切换类.not-active（删除.not-active以用于下面的最后一个脚本）：

$("#navbar li.active").toggleClass("not-active");

这将在活动的子菜单上切换类.not-active（删除.not-active以用于下面的最后一个脚本）：

$('#navbar ul.sub-menu li.active').toggleClass("not-active");

如果存在.current-menu-parent，则会添加.parent-active类：

$('ul#navbar li.current-menu-parent').addClass('parent-active');

如果存在li.current-menu-parent ul.sub-menu，则会添加.child-active类：

$('ul#navbar li.current-menu-parent ul.sub-menu').addClass('child-active');

* 当将鼠标悬停在其子菜单上时，这会向父项添加.hilite类：*

$('#navbar li').hover(
    function() {
        $(this).parents('li').children('a').addClass('hilite');
    },
    function(){
        $(this).parents('li').children('a').removeClass('hilite');
    }
);

这会在悬停其他菜单项时删除活动菜单的.active类，但在将鼠标悬停在活动项目或活动项目的子项目时不会被使用：

$('#navbar li.not-active').hover(
    function() {
        $('#navbar .active').removeClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').removeClass('parent-active child-active');
    },
    function() {
        $('#navbar .active').addClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').addClass('parent-active child-active');
   }
);

所以现在我们有了jQUERY让我们获取css和html以供参考。

这是css：

/*Main position of menu*/
#navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative;  width: 100%}
/*First UL tag for menu*/
ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009AD9}
/*Sets style for each LI tag and sets effects*/
#navbar li{float: left; list-style: none; text-transform: uppercase; font-weight: bold}
#navbar li a{display: block; text-decoration: none; color: #fff; padding: .24em .8em; line-height: normal}
#navbar li:hover a:hover, #navbar li a.hilite{background: #fff; color: #000}
#navbar li.active-menu a{background: #fff; border-top: 2px solid #B70F0F; padding-top: .063em; color: #666}
/*Sets parent active when child is active*/
#navbar li.parent-active a{background: #fff; color: #666}
/*Sets child-menu to not display when not-active*/
ul.sub-menu{display: none}
/*Sets the position of child menu using first-child (leave to avoid conflict with other style's)*/
#navbar li ul.sub-menu li.first-child{margin-left: -0.375em}
/*Sets child as visible on parent hover*/
#navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child as visible when parent is active menu*/
#navbar li.active-menu ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child menu active when active item is inside of child menu*/
ul.child-active{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
/*Sets style of child links*/
#navbar li ul.sub-menu li a{display: block; text-decoration: none; padding: 0 .5em; line-height: normal}
/*Sets various child link styles*/
ul.sub-menu li a{color: #666!important}
ul.sub-menu li a:hover{color: #000!important}
li.active-menu ul.sub-menu a{border-top: none!important; padding: 0 .5em!important}
#navbar li.current-menu-parent:hover ul.sub-menu{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}

阅读

应该非常简单

这是html：

<div id="navigation">
    <ul id="navbar">
        <li class="not-active"><a href="#">Main 1</a></li>
        <li class="active active-menu"><a href="#">Main 2</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 1</a></li>
                <li class="child-menu"><a href="#">Sub 2</a></li>
                <li class="child-menu last-child"><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li class="not-active"><a href="#">Main 3</a></li>
        <li class="not-active"><a href="#">Main 4</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 4</a></li>
                <li class="child-menu"><a href="#">Sub 5</a></li>
                <li class="child-menu last-child"><a href="#">Sub 6</a></li>
            </ul>
        </li>
    </ul>
</div>

请随意使用此代码，如果您找到一种更简单的方法对所有这些脚本进行分组，请执行此操作。

您可以在JSFIDDLE

看到现场演示

MouseOver删除类MouseOut还原类

1 个答案:

这是我添加到WordPress的功能：