JQuery多个.not树遍历

我想要一个菜单工作，隐藏菜单树的不同部分。我无法获得多。不言的工作，我希望能有一些见解...JQuery多个.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);

来源

2015-09-06 Cascades

ID意味着在HTML页面中是唯一的。如果您想访问多个元素，请使用类别名称。

我将UL tags with ID drop-sub的id属性更改为class并发布了它。

<ul id="drop-sub">到<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>

来源

2015-09-06 20:05:09

重复的ID已修复。谢谢你指出。如果我点击子菜单项B，如何使子菜单项ACDE隐藏，同时使子菜单B出现？这就是我的两个条件，没有进入，但我不知道如何使它工作。 – Cascades

我正在制作一个菜单，当点击项目时，只显示当前子菜单和直接父项目。所有父母兄弟姐妹都隐藏起来了。示例：MAIN-3> SUB-2> SUB-SUB 1，SUB-SUB 2，SUB-SUB 3. – Cascades

或使用我的标签名称：MAIN-3> DROP-2> DROP-SUB 1，DROP-SUB 2， DROP-SUB 3 – Cascades

试试这个 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/

来源

2015-09-06 07:42:00

不太什么，我一直在寻找，但它确实帮助我提供一个更简单的答案，通过添加类和对该类别做不声明 – Cascades

以下工作：

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

如果本声明会的工作，它会回答我原来的问题完全以更简单的方式。

来源

2015-09-06 17:46:20 Cascades

JQuery多个.not树遍历

回答

相关问题