多级手风琴式导航菜单

Multi Level Accordion Like Navigation Menu

本文关键字:菜单 导航 手风琴 多级      更新时间:2023-09-26

尝试使用jquery创建一个类似手风琴的多级导航菜单。我从一篇帖子中得到了这个,我能够做到,但挑战是点击sub-sub-items时不会显示。

FIDDLE

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

请帮我把这个修好。

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

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

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

更新的小提琴:http://jsfiddle.net/66kJs/4/(单击项目2,然后单击子项目1)

更新:忘记了手风琴的影响!修复了更新:删除了stop()-如果在动画过程中交互,它将留下元素先前状态的工件