Question

尝试使用jquery创建类似导航菜单的多级手风琴。我从帖子中得到了这个，但我能够做到这一点，但挑战是点击它时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() - 如果在动画期间进行交互，则会留下先前元素状态的工件

多级手风琴就像导航菜单一样

1 个答案: