jquery - 我正在寻找隐藏不是所选节点父节点的节点的 jquery 树菜单

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，但这样你可以获得一些想法。（我在这里用 SO 写了这个，我还没有测试过，所以它可能有一些错误）