javascript - 如何隐藏/显示/折叠/展开动态附加的 ul 元素？

Question

大家好，这是我的数据，我用复选框附加到 ul 为:

Id  name       subid   subname
1   India      1       Virat
1   India      2       Rohit
1   India      3       Shikar
2   Australia  4       Smith
2   Australia  5       warner

这形成了一个带有动态附加复选框的树。

我的数据分别包含所有这些记录。我把它分组并按照上面的方式制作。

var tree = {};

for (var i = 0; i < data.d.length; i++) {
    var groupName = data.d[i].name + "_" + data.d[i].id;
    if (!tree[groupName]) {
        tree[groupName] = [];
    }
    tree[groupName].push(data.d[i].subname + "_" + data.d[i].subid);
}

myArray = [];

for (var groupName in tree) {
    myArray.push({ team: groupName, player: tree[groupName] });
}

for (var i = 0; i < myArray.length; i++) {
    var i1 = myArray[i].team;
    var parts = i1.split('_', 2);
    var name = parts[0];
    var id = parts[1];
    var myStringArray = myArray[i].player;

    $('.divclassid .multiselect-container').append($("<ul onclick='addnewClass();' class='collapselist' ><label class='checkbox'><input id='chk_" + id + "' class='chkCls' type='checkbox' onchange='chksubcls(this);'   value='" + id + "'/>" + name + "</label></ul>"));

    // debugger;
    if (myStringArray != "" + "_") {
        var arrayLength = myStringArray.length;

        for (var k = 0; k < arrayLength; k++) {
            var subidname = myStringArray[k];
            var subparts = subidname.split("_", 2);
            var subname = subparts[0];
            var subid = subparts[1];

            $('.divclassid .multiselect-container').append($("<ul onclick='addnewClass();' style='display:none;'  class='expandlist'><label class='checkbox subcls'  ><input id='chksub_" + id + "' class='chkClssub' type='checkbox'  value='" + subid + "'/>" + subname + "</label></ul>"))
        }
    }
}

function addnewClass() {
    $('.divclassid .btn-group').addClass('open');
}

function chksubcls(obj) {
    if ($('#chk_' + obj.value).prop('checked')) {
        // debugger;
        $('ul.expandlist').show();
        // Here, how to expand collapse only those which are checked?
    }
    else {
        // $('ul.expandlist').find('ul.chkClssub #chksub_' + obj.value).css('display', 'none');
        $('ul.expandlist').hide();
    }
}

现在我制作了 ul 风格的 display: none。当我选中一个复选框时，所有元素都在展开。我只需要扩展选中的那个团队。

假设如果india被选中，只有

india
virat
rohit
shikar

应该展开。它不工作。它正在扩展整个 ul 列表。请帮忙。

我用 ul 将它形成为列表，它动态附加了复选框。 或者是否有任何其他方式添加为树，仅选中展开/折叠。所有列表都是动态附加的。在选中复选框时，我正在调用一个函数并传递选中的复选框 ID。现在，如何展开/折叠仅选中的团队和玩家列表？

当我这样做时，它运行不正常。检查任何团队名称时，所有列表都会展开和折叠。只应展开带有球员的选中球队名称。所有内容都动态附加到 div。

使用 TreeView 动态绑定(bind)到 ul 并仅选择展开/折叠的任何其他方式也对我有帮助。

请帮忙。

Answer 1

我看不到在您的代码中创建的 btn-group div，因此在 addNewClass 中，这一行 $('.divclassid .btn-group') 不会执行任何操作。另外，如果您需要切换相应的元素。在任何元素上写一个监听器，比如 $('li').on('click',function(event) { $(event.target).toggle(); });(只是一个例子) 希望这个对你有用。