如何使用 jQuery 来定位无序列表中的多个级别的子元素？答案

【问题标题】：How can I use jQuery to target multiple levels of child elements in an unordered list?如何使用 jQuery 来定位无序列表中的多个级别的子元素？
【发布时间】：2016-05-01 13:46:38
【问题描述】：

在我的多级无序列表中，我使用 jQuery 在父元素旁边添加子菜单按钮。单击这些时，我尝试添加一个附加类：open 到所有子元素——父元素中包含的ul、ul li 和ul li a。

目前，这个命令只移动了一级，工作到ul li，但它对包含在其中的ul li a 超链接标签没有影响。

例如，如果您看一下我的 js fiddle – 打开子菜单时，子菜单链接应该从蓝色变为黄色。同样，当打开子子菜单时，链接应该变成粉红色 - 但在菜单的两个级别中，当单击按钮时，它们都没有被赋予 open 类。

https://jsfiddle.net/8nj5y4t1/23/

这是我正在使用的代码：

jQuery(document).ready(function($) {

    $('<span class="submenu-button">+</span>').insertBefore('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li');

    $('.submenu-button').click(function() {
        $(this).next().toggleClass('open').children().toggleClass('open');

     });

});

值得一提的是，我还尝试了以下代码。我读到 .find 选择器针对多个级别的子元素，但是当付诸实践时，这会阻止它在我的 Wordpress 主题中完全工作（有趣的是不在小提琴中），并且它们包含的列表项或超链接都没有被赋予额外的类.

$(this).next().toggleClass('open').find('ul ul li, ul ul li a').toggleClass('open');

【问题讨论】：

使用>获取直接子节点，例如：ul > li > a
您好，谢谢您——但它似乎只适用于链接变为粉红色的子菜单，但不适用于保持蓝色的子菜单。你知道为什么会这样吗？ jsfiddle.net/8nj5y4t1/24
请在您的问题中添加MCVE 的html。 Stack Overflow 上的问题应该是独立的。
嗨 Sumurai8，我不确定我是否理解，我的问题是如何违反这些条款的？谢谢

标签： jquery css

【解决方案1】：

就像@Pranav C Balan 建议的那样，使用直接子代。

请注意，使用此方法，您必须列出元素树上的所有元素。

ul > li > div.unimportant > span.random > a

等等

【讨论】：

谢谢 Django，我已经从您的回答中发现了这一点，并且盯着检查元素标记大约 20 分钟。我所做的是从 Pranav 最初编写的内容中删除 ul，因为 .next 命令已经选择了无序列表。所以我的最终代码是：$(this).next().toggleClass('open').find('li, li > a').toggleClass('open'); 不幸的是，子菜单的切换按钮也在切换子菜单上的openclass，但我想那是另一天的另一个问题。