提问人:Matthew Wright 提问时间:2/14/2021 更新时间:2/14/2021 访问量:327
将类添加到 4 级超级菜单的每个子菜单级别
add class to each submenu level of 4-level mega menu
问:
我的js非常初级。我正在 WordPress 主题(JointsWP 框架)中构建一个 4 级大型菜单,我希望每个级别都贴上不同的标签。关节已经为第一个子菜单执行此操作,但需要其余子菜单彼此不同。我想要什么:
<ul id="main-nav">
<ul class="first-sub">
<ul class="second-sub">
<ul class="third-sub">
我得到的最好的:
<ul id="main-nav">
<ul class="first-sub">
<ul class="second-sub">
<ul class="second-sub third-sub">
我试图删除第 4 级的“second-sub”类,我尝试使用“>”来仅针对 second-sub。两者都没有任何运气。以下是我目前正在做的事情:
$(document).ready(function() {
$('#main-nav ul ul').addClass('second-sub');
$('#main-nav ul ul ul').addClass('third-sub');
});
我认为这是我在论坛上找不到的简单事情之一,因为“咄”。任何帮助都表示赞赏。
答:
2赞
charlietfl
2/14/2021
#1
您可以使用 a for 来排除任何后代not()
second-sub
$('#main-nav ul ul').not('#main-nav ul ul ul').addClass('second-sub');
$('#main-nav ul ul ul').addClass('third-sub');
1赞
nullishcoalesce
2/14/2021
#2
您可以循环所有子项并向其添加类。有了这个,你可以添加任意数量的关卡。只需将相应的类名添加到数组中即可。
var classes = ['red', 'blue', 'green']
$('#main-nav').find('*').each(function(index) {
$(this).addClass(classes[index])
})
演示:JSFiddle
评论
0赞
charlietfl
2/14/2021
这是基于无效标记。Op 显示 ul 直接嵌套在 ul 中,这是伪代码,不是有效的 html。它们只能嵌套在 .您的解决方案使用根本行不通<li>
find('*')
评论
$('#main-nav ul:eq(1)').addClass('second-sub'); $('#main-nav ul:eq(2)').addClass('third-sub');
<ul>