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で書いたが、テストしていないので、いくつかのバグがあるかもしれない）