像导航菜单一样的多层次手风琴

Question

尝试使用jquery创建像导航菜单这样的多层次手风琴。 我是从帖子中得到的，我能够做到，但是挑战在于，单击sub-sub-items时不会显示sub-sub-items 。

小提琴

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>

JS：

$('.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();
});

请帮助我解决此问题。

Answer 1

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

无需使用sub-sub-menu ，只需将所有子菜单保留为sub-menu ，无论它们的嵌套程度如何。

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

更新的提琴： http : //jsfiddle.net/66kJs/4/ （单击项目2，然后单击子项目1）

更新：忘记手风琴的影响！ 进行了更新：删除了stop() -如果在动画过程中进行交互，则将保留元素先前状态的伪像