我正在尋找隱藏不是所選節點的父母的節點的jquery tree菜單

Question

我需要這個站點上的東西：http://msdn.microsoft.com/en-us/library/dd251056.aspx 左邊的菜單是我想要的 - 當用戶選擇項目時，它顯示這個項目的孩子而且還隱藏了不是所選節點的直接父節點的所有父節點。這對於大樹菜單很有用。

Answer 1

你可以做這樣的事情：

<ul> 
    <li> 
     <span>Parent</span> 
     <ul> 
      <li><span>Children</span></li> 
      <li><span>Children</span></li> 
      <li><span>Children</span></li> 
     </ul> 
    </li> 
    <li> 
     <span>Parent</span> 
     <ul> 
      <li><span>Children</span></li> 
      <li><span>Children</span></li> 
      <li><span>Children</span></li> 
     </ul> 
    </li> 
    <li> 
     <span>Parent</span> 
     <ul> 
      <li><span>Children</span></li> 
      <li><span>Children</span></li> 
      <li><span>Children</span></li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li><span>Children</span></li> 
      <li><span>Children</span></li> 
      <li><span>Children</span></li> 
     </ul> 
    </li> 
</ul> 


<script> 
    $('li').on('click',function(){ 
     $(this) 
     .children() //Selecting children for the clicked li 
      .slideDown(200) //Then we show them 
       .parent() //slideDown returns children again, so we'll get the parent li again 
        .siblings('li') //and then we'll call his siblings 
         .children() 
          .slideUp(200); //and finally we'll hide their children 
    }); 
</script> 

顯然，這將需要一些CSS和JavaScript的更多，但你可以得到一些想法。 （我在這裏寫了這個，所以我沒有測試它，所以它可能有一些bug）