從hide（）中排除父元素及其子元素

構建此菜單，但我在排除父類及其子元素時遇到問題。我希望沒有額外的課程來解決這個問題。從hide（）中排除父元素及其子元素

所以它想工作的方式是點擊一個a.clicked並.hide()的li elements外自己的li但隨着的ul

它沒有問題找到父ul範圍，把一個類上li我在做li.active。這裏的難點在於排除li.active中的所有元素。它聽起來很凌亂，所以我儘可能在劇本中評論最好的一面。

謝謝你們對輸入

編輯：我做的不好解釋，但就像我點擊level 1 - 1和level 1 - 2是假設隱藏和多數民衆的格局，因爲我們去打倒菜單更深的2 - 1 ECT

首先這裏是演示：http://jsfiddle.net/Abj9u/6/

$('.clicked').on('click', function(){ 
    var $this = $(this); 

    //activate this li 
    $this.parent('li:first').addClass('active'); 

    //hide the other level (1)(2)(3)(4)(ect..) li items 
    //is there a way to exlude .active li and its children without adding a class like .sub to the sub li's? 
    $this.parents('ul:first').find('li').not('.active').hide(); 

    //add class to this for style 
    $this.addClass('selected'); 

    //show the sub ul 
    $this.parent().children('ul:first').show(); 
});

HTML

<ul id="nav"> 
    <li> 
     <a href="#" class="clicked">Level 1 - 1</a> 

     <ul class="hidden"> 
      <li><a href="#" class="clicked">Level 2.1 - 1</a> 
       <ul class="hidden"><li><a href="#" class="clicked">Level 3.1 - 1</a></li></ul>     
      </li> 
      <li><a href="#" class="clicked">Level 2.2 - 1</a> 
       <ul class="hidden"><li><a href="#" class="clicked">Level 3.2 - 1</a></li></ul>     
      </li> 
      <li><a href="#" class="clicked">Level 2.3 - 1</a> 
       <ul class="hidden"><li><a href="#" class="clicked">Level 3.3 - 1</a></li></ul>     
      </li> 
     </ul>     
    </li> 

    <li> 
     <a href="#" class="clicked">Level 1 - 2</a> 

     <ul class="hidden"> 
      <li><a href="#" class="clicked">Level 2.1 - 2</a> 
       <ul class="hidden"><li><a href="#" class="clicked">Level 3.1 - 2</a></li></ul>     
      </li> 
      <li><a href="#" class="clicked">Level 2.2 - 2</a> 
       <ul class="hidden"><li><a href="#" class="clicked">Level 3.2 - 2</a></li></ul>     
      </li> 
      <li><a href="#" class="clicked">Level 2.3 - 2</a> 
       <ul class="hidden"><li><a href="#" class="clicked">Level 3.3 - 2</a></li></ul>     
      </li> 
     </ul>     
    </li> 
</ul>

來源

2012-05-22 Dejan.S

如果隱藏父，孩子們將被自動隱藏太多，所以你真正需要做的是隱藏相關''是的，對嗎？ – Gareth

@Gareth：這就是我的想法。就像'$ this.parents（'ul：first> li'）。not（'.active'）。hide（）;' –

是的，那就是我想要做的。它基本上隱藏所有其他'li's'在同一水平上可以這麼說 –

也許這：

$(this).closest('li').siblings().hide()

至於爲什麼這個作品，這是相當自我解釋：

從此子元素開始...
找到的第一個父李...
然後找到所有這個LI的兄弟姐妹...
隱藏它們。

來源

2012-05-22 20:37:07

是的，實際上起作用，我認爲它起初很瘋狂:)如果你有一分鐘你可以更新你的答案爲什麼這項工作和短怎麼樣？謝謝 –

已更新。希望它是有道理的。 –

是的，但在這種情況下，兄弟姐妹是什麼意思？這個'ul'中的每個'li'元素（不是嵌套的li）？ –

如何找到下一個ul了樹，隱藏所有的li s，則僅顯示當前li？

$this.parents('ul:first > li').hide(); 
$this.parent().show();

編輯：其他答案是一個更好的解決辦法，但...

來源

2012-05-22 20:44:17 Gareth

這不起作用，它仍然隱藏所有其他'li's'在父母的範圍內。如果在這個節目中取消隱藏孩子「li's」，這可能會奏效。 –

我編輯過，直接找到父'ul'的直接子節點。但正如我所說，如果其他答案能夠使用這一點 - 這很簡單。 – Gareth

仍然無法正常工作 –

從hide（）中排除父元素及其子元素

回答

相關問題