gpt4 book ai didi

jquery - MouseOver 删除类 MouseOut 恢复类

转载 作者:行者123 更新时间:2023-12-01 05:06:06 25 4
gpt4 key购买 nike

因此,当我将鼠标悬停在其他菜单项上时,我试图找到一些脚本来删除事件菜单项上的类。但是当我离开导航时恢复它。棘手的部分是确保如果当前事件项目上有事件子菜单,则脚本不会触发。

例如,我们有 4 个菜单项(Main 1、Main 2、Main 3、Main 4)。其中两个有子菜单(Main 2、Main 4)。 Main 1 当前处于事件状态,并且有一个名为 active 的类。当您将鼠标悬停在 Main 2 上时,子菜单会显示,当悬停在其子菜单上时,Main 2 有一个悬停类和一个 hilite 类,但现在 Main 1 恢复到正常库存。现在您离开导航栏,Main 1 又回到活跃类别,而 Main 2 看起来很正常

现在采用相同的设置并使 Main 2 处于事件状态,并且默认显示其子菜单。当您将鼠标悬停在 Main 1 Main 3 Main 4 上时,子菜单将关闭,Main 2 上的事件类将被删除,但当您移开时,它会恢复为事件状态并显示其子菜单。现在,如果您将鼠标悬停在 Main 2 或其子菜单上,则该类永远不会更改,它会保持不变。

我已经广泛搜索了类似的设置,但除了我在之前的问题上发布的内容之外找不到任何内容,可以找到here我扔掉了所有的东西,但不幸的是 stopPropagation() 这让我认为这是这个项目的错误代码,但它适用于一个截然不同的项目。我对此提出了第二个问题,因为我不确定如果它已经被标记为已回答,我是否可以在另一个问题上发布。

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

编辑:这是 jsfiddle here 上旧脚本的链接更新:2011 年 4 月 30 日

最佳答案

请注意,这仅适用于 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+

这会将一个类添加到当前菜单项

到目前为止,我已经添加了一组东西,可能有一种方法可以将它们合并在一起并使其作为一个整体工作,但我不知道如何做到这一点,但我会在这里发布代码,然后jsfiddle 演示

这是我拼凑起来的 jQUERY 脚本,它将添加演示中的效果:

这会向所有父项和非父项添加一个 .not-active 类:

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

这会向所有 ul.sub-menus 添加一个 .child-menu 类:

$('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 观看现场演示

关于jquery - MouseOver 删除类 MouseOut 恢复类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5839623/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com