Question

嗨，请你告诉我如何在正确的元素中显示子元素。我的功能第一次工作正常但第二次失败。

我执行以下步骤

1）按Add按钮2次。生成row2以及firstLevel的子菜单。 2）展开菜单选项（+）按钮。单击“menu_tc_1”。删除右侧面板上的行。按“添加”按钮创建嵌套子菜单。

3）当你再次按下“menu_tc_1”时，它会显示与你点击添加按钮数量相同的行数。

4）但是当你单击“First Level”时它应该显示两行，因为它有两个子节点（“menu_tc_1”，“menu_tc_2”）。它显示所有行。因为在数组中它给出了所有值。

我需要只展示孩子 jsFiddle

$(document).on('click', 'ul li > a', function (e) {
    //first method..
    console.log($(this).siblings().length);

    var selEl = [];
    $(this).closest('ul').find('li').each(function (idx, el) {
        var id= el.id.replace('menu_','');
        selEl.push(id);
    });

    // alert(id);
    console.log('aaa' + selEl);
    getViewFromPanel(selEl);
});

function getViewFromPanel(arr) {
    console.log(arr); 
    $('#ultest').html('');
    for (var i = 1; i < arr.length; i++) {
        $('#ultest').append('<li id=' + arr[i] + '><a href="#" class="foo">' + arr[i] + '</a></li>'); 
    }
}

Answer 1

请参阅 this updated fiddle 。

主要问题是$(this).closest('ul').find('li').each(function (idx, el) {。 find将查找所有子级别，这就是显示所有菜单的原因。你只想要下一个ul的孩子：

$(this).closest('li').children('ul').children().each(function (idx, el) {

另外，你跳过getViewFromPanel中的第一个元素（可能是因为使用了find） - 它应该从0索引开始：

for (var i=0;i<arr.length;i++){

设置活动类的方式存在问题，因此当您返回并单击“添加”时，会将其添加到错误的层次结构中。我不确定你对活动类的意图是什么，但我认为你应该清除类$('.active').removeClass('active')并在层次结构发生变化时再次设置它。

如何在右侧面板中显示子元素？

1 个答案: