javascript - 添加第二个子 jquery 切换功能

Question

我有一个表格，当您单击记录时会打开第二个级别，给用户一种感觉 进行向下钻取，现在它仅适用于一个“子级”或第二级，但我想知道的是添加第三级，因此当我单击 fiddle 上出现的任何绿色选项时，都会显示一个新级别。

这是jquery代码

$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
    $('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})

$('table.drillDown').each(function() {

    var $table = $(this);
    $table.find('.parent').click(function() {
        console.log( "*****Click on Parent" );
        $(this).nextUntil('.parent').toggle("fast"); 

    });

    var $childRows = $table.find('tbody tr').not('.parent').hide();
    $table.find('button.hide').click(function() {
        $childRows.hide();

    });

    $table.find('button.show').click(function() {
        console.log("*****Click on Child");
        $childRows.filter('.child').show();
    });

    $table.find('tr.child').click(function(){
        $(this).nextUntil('.child').show()
    });

});

https://jsfiddle.net/ny6qcxtd/

感谢您的帮助!

Answer 1

我创建了第三个级别，称为孙子:D

我更新了这段代码:

        $table.find('.parent').click(function() {
            console.log( "*****Click on Parent" );
            $(this).nextUntil('.parent', ".child").toggle("fast"); 

        });

        $table.find('.child').click(function() {
            console.log( "*****Click on child" );
            $(this).nextUntil('.child', ".grandson").toggle("fast"); 

        });

您可以点击第一个 parent 和第一个 child 来查看孙子。

看:https://jsfiddle.net/ny6qcxtd/1/