当父母li被点击时切换childrens

我正在尝试制作一个树状结构，当父母被点击时，可以显示/ colapsed分支。看到我迄今为止，似乎我不能阻止整个树的时候，只要点击树中的任何项目，只留下根元素。我尝试了与孩子，父母，兄弟姐妹，有一个类的根ul，所有的ul，李，使用独特的ID而不是类...没有为我工作。总是这种奇怪的行为，错误，或者什么都不是。当父母li被点击时切换childrens

观点：

<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>

来源

2016-09-16 Fjodr

ASP.NET代码在这里完全不相关...您是否会为这段代码添加生成的HTML，以便我们可以生成一个工作模型？ –

我想这与单击事件传播有关......但至少提供了呈现的HTML标记编辑：所以你有'.tree'嵌套在其他'.tree'元素内？如果是这样，你应该使用'$（this）.children（'ul'）。slideToggle（）;'并停止事件传播 –

我敢打赌，你需要停止单击事件传播，并只针对直接后代使用children()：

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

来源

2016-09-16 15:49:29

当父母li被点击时切换childrens

回答

相关问题