Javascript 多级手风琴式导航菜单

尝试使用

jquery

创建类似手风琴的多级导航菜单。我从一篇帖子中得到了这一点，并且我能够做到，但挑战是当单击它时，

子项

不会显示出来

HTML:

<div class="sidebar">
    <ul>
        <li>
            <a href="javascript:void(0)">Item 1</a>
            <ul class="sub-menu">
                <li>
                    <a href="javascript:void(0)">Sub Item 1</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 2</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 3</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:viod(0)">Item 2</a>
            <ul class="sub-menu">
                <li>
                    <a href="javascript:void(0)">Sub Item 1</a>
                    <ul class="sub-sub-menu">
                        <li>
                            <a href="javascript:void(0)">Sub Sub Item 1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Sub Sub Item 2</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Sub Sub Item 3</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Sub Sub Item 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 2</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 3</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:viod(0)">Item 3</a>
        </li>
        <li>
            <a href="javascript:viod(0)">Item 4</a>
        </li>
        <li>
            <a href="javascript:viod(0)">Item 5</a>
        </li>
    </ul>  
</div>

---

请帮我解决这个问题。

您的选择器有点过于具体，html中的类也是如此

无需使用

子菜单

，只需将所有子菜单保持为

子菜单

，无论它们是多么嵌套

另外，松开选择器，不要使用子选择器

更新的小提琴：（单击项目2，然后单击子项目1）

更新：忘记了手风琴的影响！修好了

---

更新：删除了

stop（）

-如果在动画期间进行交互，则会留下元素先前状态的工件

您的选择器有点过于具体，与html中的类相同

无需使用

子菜单

，只需将所有子菜单保持为

子菜单

，无论它们是多么嵌套

另外，松开选择器，不要使用子选择器

更新的小提琴：（单击项目2，然后单击子项目1）

更新：忘记了手风琴的影响！修好了

---

更新：删除了

stop（）

-如果在动画期间进行交互，它将保留元素先前状态的工件

@zamnuts-感谢您的回复。但现在我失去了手风琴般的效果。我用手风琴的效果向外看。我现在能做什么是小提琴。帮我把它弄得像手风琴一样。当我点击一个

子项时，它就崩溃了。太棒了！！非常感谢你的帮助。照你所愿去做。我想更多地了解jquery。您有什么需要帮助的吗？请在单击
子菜单时查看高度
let us@zamnuts-谢谢您的回复。但现在我失去了手风琴般的效果。我用手风琴的效果向外看。我现在能做什么是小提琴。帮我把它弄得像手风琴一样。当我点击一个
子项时，它就崩溃了。太棒了！！非常感谢你的帮助。照你所愿去做。我想更多地了解jquery。有什么需要帮助的吗？请在单击
子菜单时查看高度
$('.sidebar > ul > li > a').click(function(ev) {
    $('.sidebar .sub-menu, .sub-menu .sub-sub-menu').stop().slideUp();
    $(this).next('.sub-menu').stop().slideToggle();
    ev.stopPropagation();
});