jQuery树菜单以错误的方式折叠

Question

关于jQuery的一个简单问题。我对此很新...

如果我点击子菜单，列表应向下滑动，其他每个打开的列表应向上滑动。到目前为止，它正在发挥作用。但是当我点击打开的那个时，它会再次上下滑动。如何阻止开放者做这件事？当点击它时，开放应该就在那里......

非常感谢！

            <ul>
                <li>
                    <a href="#">Item 1</a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#"></a>
                        </li>
                        <li>
                            <a href="#"></a>
                        </li>
                        <li>
                            <a href="#"></a>
                        </li>
                        <li>
                            <a href="#"></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Item 2</a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#"></a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="#"></a>
                                    <ul class="sub-menu">
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"></a>
                        </li>
                        <li>
                            <a href="#">S</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Item 3</a>
                </li>
                <li>
                    <a href="#">Item 4</a>
                </li>
                <li>
                    <a href="#">Item 5</a>
                </li>
            </ul>

的jQuery

$('.treeview ul li a').click(function(ev) {
                $('.treeview .sub-menu').not($(this).parents('.sub-menu')).slideUp();
                $(this).next('.sub-menu').slideDown();
                ev.preventDefault();
            });

Answer 1

基本上，您的not选择器未获得任何匹配，因此不会排除任何内容。

对于树，您希望使用相对于单击项目操作的选择器。然后它们也可以用于嵌套元素。

试试这个：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/EnJ68/1/

$('.treeview ul li a').click(function (ev) {
    var $this = $(this);
    // Collapse all other lists under parent list
    $this.closest('li').siblings().find('ul').slideUp();
    // Expand the sibling lists
    $this.siblings().slideDown();
    ev.preventDefault();
});

您会注意到它现在以与父级相同的方式处理子菜单。

*注意：您还需要以折叠状态启动所有内容。所以也有这个：

$('.treeview>ul>li>ul').hide();