多个嵌套列表项的Jquery切换不起作用

Question

我有一个带有 jQ​​uery 前置切换按钮 (.menu-expand) 的无序列表。单击此按钮会切换一个类以打开子菜单。

问题是该类被添加到所有子菜单中，因此在单击第一个切换按钮时它们都会打开。

我无法更改 HTML 结构，因此需要 jQuery 中的解决方案来使用前置切换按钮独立切换每个子菜单。有人可以帮忙吗？

我尝试过使用 .next() 但我无法让它工作。

这里是 HTML

<ul>
<li class="has-dropdown">
    Item
    <ul class="dropdown">
        <a href="#">Sub Item 1</a>
        <li class="has-dropdown">
            <a href="#">Sub Item 2</a>
            <ul class="dropdown">
                <a href="#">Sub Item 3</a>
                <li class="has-dropdown">
                    <a href="#">Sub Item 4</a>
                    <ul class="dropdown">
                        <a href="#">Sub Item 5</a>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

这里是 jQuery：

jQuery('.has-dropdown').prepend('<a class="menu-expand">+</a>');

$(".menu-expand").on("click", function(e) {
e.stopPropagation();
    jQuery(this).closest('.has-dropdown').find('ul.dropdown').toggleClass('active');

})

CSS：

ul.dropdown{
  display:none;
}
ul.dropdown.active {
  display:block;
}

jsfiddle here

Answer 1

Salam，你可以用 children() 函数代替 find()，

jQuery('.has-dropdown').prepend('<a class="menu-expand">+</a>');

$(".menu-expand").on("click", function(e) {
e.stopPropagation();
jQuery(this).closest('.has-dropdown').children('ul.dropdown').toggleClass('active');

})