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。

使用树视图动态绑定到ul并仅选择展开/折叠的任何其他方式也会对我有帮助。

请帮忙。

Answer 1

我看不到btn-group div创建到你的代码中所以在addNewClass里面这行$（'。divclassid .btn-group'）将不会做任何事情。此外，如果您需要切换相应的元素。在$('li').on('click',function(event) { $(event.target).toggle(); });之类的任何元素上写一个监听器（只是一个例子）希望这个对你有用。

如何隐藏/显示/折叠/展开动态附加的ul项？

1 个答案: