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時 ，我希望所有其他子菜單項都隱藏， 除了當前的子菜單項和/或不 放置子菜單項 。

我遇到的問題是當我隱藏“子菜單”項時，它將ul＃drop下的所有li標簽都隱藏了。 我能夠使當前的ul＃drop li不隱藏，但是我無法弄清楚ul＃drop-sub li的異常。

這是我正在使用的失敗的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/

Answer 2

以下工作：

$(".drop-span").click(function(){
    $(this).parent("li").addClass('active');
    $(this).siblings("#drop-sub").find('li').addClass('active');
    $("ul#drop li").not(".active").slideToggle(400);
    $(this).next("ul#drop-sub").slideToggle(400);
    $(this).parent("li").removeClass('active');
    $(this).siblings("#drop-sub").find('li').removeClass('active');

似乎應該有一種方法可以通過將創建.active類的元素添加到.not（）而不是在.active上過濾.not（）來進一步簡化此方法。

像這樣的東西，但似乎不起作用：

$("ul#drop li").not(
    $(this).parent("li"), $(this).siblings("#drop-sub").find('li')
).slideToggle(400);
$(this).next("ul#drop-sub").slideToggle(400);

如果這一說法行得通，它將以更簡單的方式全面回答我的原始問題。

Answer 3

ID在HTML頁面中是唯一的。 如果要訪問許多元素，則對所有元素使用類名。

我將UL tags with ID drop-sub的UL tags with ID drop-sub的id屬性更改為class並將其發布。

<ul id="drop-sub">到<ul class="drop-sub">

碼

 $(".drop-sub > li ").click(function() { $('li').not($(this).parentsUntil('#main-menu')).not($(this)).hide(400); }) $('#showall').click(function() { $('li,ul').show(400) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='button' id='showall' value='Show All'> <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 class="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 class="drop-sub"> <li>Drop Sub Menu Item D1</li> <li>Drop Sub Menu Item D2</li> </ul> </li> <li> <span class="drop-span">Sub Menu Item E</span> <ul class="drop-sub"> <li>Drop Sub Menu Item E1</li> <li>Drop Sub Menu Item E2</li> </ul> </li> <li>Sub Menu Item F</li> <li> <span class="drop-span">Sub Menu Item G</span> <ul class="drop-sub"> <li>Drop Sub Menu Item G1</li> <li>Drop Sub Menu Item G2</li> </ul> </li> </ul> </li> </ul>