Question

我有一个带有jQuery前置切换按钮（.menu-expand）的无序列表。单击时，将切换一个类以打开子菜单。

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

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

我尝试使用.next（），但是我无法使用它。

这是HTML

git branch -m feature_X_toddmo
git push --set-upstream origin feature_X_toddmo

这是jQuery：

<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>

CSS：

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');

})

jsfiddle here

Answer 1

萨拉姆，您可以使用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');

})

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

1 个答案: