Question

我有嵌套列表的树结构。我试图隐藏嵌套列表，直到用户点击它们，然后我调用toggle（）。这是我的代码：

var $list = $('#subject-list');
        var data = [
            { name: "A" },
            { name: "B" },
            { name: "C" },
            {
                name: "G",
                children: [
                    {
                        name: "D",
                        children: [
                            { name: "1" },
                            { name: "2" },
                            { name: "3" }
                        ]
                    },
                    { name: "E" },
                    { name: "F" }                    
                ]
            }
        ];

        var populateSubjectTree = function (data, list) {
            for (var i = 0; i < data.length; i++) {                
                if (typeof (data[i].children) !== "undefined") {
                    var listItem = $('<li class="no-style"><input class="checkbox-he" type="checkbox"><label class="label-pointer">&nbsp;' + data[i].name + ' <span class="glyphicon glyphicon-collapse-down"></span></label><ul class="has-children collapse"></ul></li>');
                    list.append(listItem);
                    var childList = listItem.find('ul');
                    populateSubjectTree(data[i].children, childList);
                } else {
                    var listItem = $('<li class="no-style"><input class="checkbox-he" type="checkbox"><label>&nbsp;' + data[i].name + '</label></li>');
                    list.append(listItem);
                }
            }

            list.find('label').click(function () {
                if ($(this).siblings('ul').length > 0) {
                    console.log($(this).siblings('ul'));
                    $(this).siblings('ul').toggle();
                }
            })
        };

它似乎适用于树中的顶级列表项，但不适用于较低级别的列表项，这里有一个jsfiddle：http://jsfiddle.net/kuv4tkqv/

目前，如果我点击项目G它很好但不在嵌套元素中 - D.似乎是什么问题？

Answer 1

使用下面的函数，即$（'。label-pointer'）而不是list.find（'label'）

         $('.label-pointer').click(function () {
            if ($(this).siblings('ul').length > 0) {
                console.log($(this).siblings('ul'));
                $(this).siblings('ul').toggle();
            }
          })

而不是

        list.find('label').click(function () {
            if ($(this).siblings('ul').length > 0) {
                console.log($(this).siblings('ul'));
                $(this).siblings('ul').toggle();
            }
        })

Answer 2

您只需要添加e.preventdefault（）;

list.find('label').click(function () {
                if ($(this).siblings('ul').length > 0) {
                    console.log($(this).siblings('ul'));
                    $(this).siblings('ul').toggle();
                        e.preventdefault();
                }
            })

列表树结构切换不起作用

2 个答案: