jquery - 如何使用 jQuery 定位无序列表中的多级子元素？

Question

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

目前，这个commans只走一级，一直到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 主题中完全工作(有趣的是不在 fiddle 中)并且列表项或它们包含的超链接都没有被赋予额外的类.

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

Answer 1

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

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

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

等等