jquery - 单击父级 li 时切换子级

Question

我正在尝试制作一个类似树的结构，当单击父级时可以显示/折叠分支。到目前为止，无论我尝试什么，每当单击树中的任何项目时，似乎都无法阻止整个树崩溃，只留下根元素。我尝试与 child 、 parent 、 sibling 一起，对根 ul、所有 ul、li 进行类操作，使用唯一的 Id 而不是类...对我来说没有任何效果。总是这种奇怪的行为、错误或什么都没有。

查看:

<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();
  });
});