javascript - JQuery 多次.not 树遍历

Question

我正在尝试让菜单正常工作，它隐藏了菜单树的不同部分。我无法让多个 .not 语句起作用，我希望有一些见解......

<ul id="main-menu">
    <li>
        <span class="main-menu-span">Menu Item 1</span>
        <ul id="drop">
            <li>Sub Menu Item A</li>
            <li>
                <span class="drop-span">Sub Menu Item B</span>
                <ul id="drop-sub">
                    <li>Drop Sub Menu Item B1</li>
                    <li>Drop Sub Menu Item B2</li>
                </ul>
            </li>
            <li>Sub Menu Item C</li>
            <li>
                <span class="drop-span">Sub Menu Item D</span>
                <ul id="drop-sub">
                    <li>Drop Sub Menu Item D1</li>
                    <li>Drop Sub Menu Item D2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

当我点击子菜单项 B 时，我希望隐藏所有其他子菜单项，除了/不当前子菜单项> 和 except/not Drop Sub Menu Items。

我遇到的问题是当我隐藏子菜单项时，它隐藏了 ul#drop 下的所有 li 标签。我能够让当前的 ul#drop li 不隐藏，但我无法找出 ul#drop-sub li 的异常(exception)情况。

这是我正在使用的失败的 JQuery:

$(".drop-span").click(function(){
    //hides all other ul#drop li items, with exceptions (second exception is not working)
    $("ul#drop li").not(
        $(this).parent("ul#drop li"), $("ul#drop-sub").children("li").show //first works, second does not
    ).slideToggle(400);
    $(this).next("ul#drop-sub").slideToggle(400);

Answer 1

试试这个 HTML :

<div class="tree well">
                    <ul>
    <li>
        <span><i class="icon-folder-open"></i> Parent</span> 
        <ul>
            <li>
                <span><i class="icon-minus-sign"></i> Child</span> 
                <ul>
                    <li>
                        <span><i class="icon-leaf"></i> Grand Child
                    </li>
                </ul>
            </li>
            <li>
                <span><i class="icon-minus-sign"></i> Child</span>
                <ul>
                    <li>
                        <span><i class="icon-leaf"></i> Grand Child</span> 
                    </li>
                    <li>
                        <span><i class="icon-minus-sign"></i> Grand Child</span> 
                        <ul>
                            <li>
                                <span><i class="icon-minus-sign"></i> Great Grand Child</span> 
                                <ul>
                                    <li>
                                        <span><i class="icon-leaf"></i> Great great Grand Child</span> 
                                    </li>
                                    <li>
                                        <span><i class="icon-leaf"></i> Great great Grand Child</span> 
                                    </li>
                                 </ul>
                            </li>


                            </li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="icon-leaf"></i> Grand Child</span> 
                    </li>
                </ul>
            </li>
        </ul>
    </li>

</ul>
                </div>

脚本:

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});

CSS:

       .tree {
min-height:20px;
padding:19px;
margin-bottom:20px;
background-color:#fbfbfb;
border:1px solid #999;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)}
.tree li {
list-style-type:none;
margin:0;
padding:10px 5px 0 5px;
position:relative
}
.tree li::before, .tree li::after {
content:'';
left:-20px;
position:absolute;
right:auto
}
.tree li::before {
border-left:1px solid #999;
bottom:50px;
height:100%;
top:0;
width:1px
}
.tree li::after {
border-top:1px solid #999;
height:20px;
top:25px;
width:25px
}
.tree li span {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
border-radius:5px;
display:inline-block;
padding:3px 8px;
text-decoration:none
}
.tree li.parent_li>span {
cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
border:0
}
.tree li:last-child::before {
height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}

请在此处查看示例:http://jsfiddle.net/jofish999/7qpu0oap/