JQuery Multiple .not tree traversal

Question

I am trying to get a menu to work, that hides different parts of the menu tree. I am unable to get a multiple .not statement to work and am hoping to have some insight...

<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>

When I click Sub Menu Item B, I would like all other Sub Menu Items to hide, except/not the current Sub Menu Item and except/not Drop Sub Menu Items.

The problem I am running into is when I hide the Sub Menu Items, it hides all li tags under ul#drop. I am able to get the current ul#drop li to not hide, but I can't figure out the exception to the ul#drop-sub li's.

Here is the JQuery I am using that is failing:

$(".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

IDs are meant to be unique in HTML page. If you want to access many elements then use class names for all of them.

I changed the id attributes of UL tags with ID drop-sub to class and posted this.

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

CODE

$(".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>

Answer 2

The following worked:

$(".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');

It seems like there should be a way to simplify this further by adding the elements that create the .active class to the .not() instead of filtering .not() on .active.

Something like this, but it doesn't seem to work:

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

If this statement would work, it would answer my original question in full in a more simple manner.

Answer 3

Try this 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>

Script :

$(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
}

See an example here: http://jsfiddle.net/jofish999/7qpu0oap/