親がクリックされたときに子を切り替えます

Question

親がクリックされたときに枝を表示/崩壊できるような構造のようなツリーを作ろうとしています。私がこれまでに試したところでは、ツリーのアイテムがクリックされたときにツリー全体が崩壊するのを防ぐことはできないと思われ、ルート要素だけが残っています。私はクラスの代わりにユニークなIDを使用して、私は子供、親、兄弟、ルートul、すべてのul、クラスに持っているとしよう...何も私のために働いた。常にこの奇妙な行動、エラー、または何も。

ビュー：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.tree').click(function() { 
      $(this).find('ul').slideToggle(); 
     }); 
    }); 
</script> 

<h2>testArbre</h2> 

<ul> 
    <li class="tree"> 
     @Model.Name 
     @ShowTree(@Model) 
    </li>  
</ul> 

@helper ShowTree(Tree tree) 
{ 
    <ul> 
     @foreach (var branch in tree.Branch) 
     { 
      <li class="tree"> 
       @branch.Name 
       @if (branch.Branches.Any()) 
       { 
        @ShowTree(branch) 
       } 
      </li> 
     } 
    </ul> 
} 

モデル：

public class ArbreDroits 
    { 
     public string Name { get; set; } 
     public List<Tree> Branches { get; set; } 

     public Tree(string name) 
     { 
      Name = name; 
      Branches = new List<Tree>(); 
     } 

     public ArbreDroits AddBranch(string name) 
     { 
      Branches.Add(new Tree(name)); 

      return Branches.Last(); 
     } 
    } 

生成されたHTMLは次のようになります。

<ul> 
    <li class="tree"> 
     racine 
     <ul> 
      <li class="tree"> 
       noeud1 
       <ul> 
        <li class="tree"> 
         noeud1Fils1 
        </li> 
        <li class="tree"> 
         noeud1Fils2 
         <ul> 
          <li class="tree"> 
           noeud1Fils2Fils1 
           <ul> 
            <li class="tree"> 
             noeud1Fils2Fils1Fils1 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li class="tree"> 
         noeud1Fils3 
        </li> 
       </ul> 
      </li> 
      <li class="tree"> 
       noeud2 
      </li> 
     </ul> 

    </li>  
</ul> 

Answer 1

私の賭けあなたが停止イベントの伝播をクリックして、唯一の直接の対象とする必要があります子孫使用children()：

$(document).ready(function() { 
    $('.tree').click(function(e) { 
    e.stopPropagation(); 
    $(this).children('ul').slideToggle(); 
    }); 
});