添加第二个子jquery切换函数

Add second child jquery toggle function

本文关键字：函数 jquery 第二个 添加      更新时间：2023-12-14

我有一个表，当你点击一条记录时，它会打开第二个级别，给用户一种向下搜索，现在它只适用于一个"儿童"或第二级别，但我想知道的是添加第三级别，这样当我点击小提琴上出现的任何绿色选项时，就会显示一个新级别。

这是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/

谢谢你的帮助！

我创建了一个名为孙的第三级：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"); 
        });

您可以单击第一个父对象和第一个子对象以查看孙子。

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

这里有一种不同的方法，可以应用于任何数量的子级别。我使用data属性为每个tr提供级别。试试下面的：

$('table.drillDown').each(function() {
    var $table = $(this),
        $rows  = $table.find('tbody tr');
    // Hide non-parents
    $rows.not('.parent').hide();
    // On click on a row, toggle the sublevel
    $rows.on('click', toggleSublevel);
    function toggleSublevel()
    {
        // Get the sublevel of the current row
        var sublevel = parseInt($(this).data('level'), 10) + 1;
        //Get the next row
        $next = $(this).next();
        // While there is a "next" element and its level is greater or equal 
        while($next.length && $next.data('level') >= sublevel)
        {
            // If it's equal, toggle it
            if($next.data('level') == sublevel) $next.toggle();
            // If it's greater, hide it
            else $next.hide();
            // Go to the next one
            $next = $next.next();
        }
    }
});
tbody tr{ cursor: pointer; }
thead tr{
    text-align: center;
    background: #eceded;
}
td{ padding: .2em .5em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="drillDown">
    <thead>
        <tr>
            <th>Some column title</th>
        </tr>
    </thead>
    <tbody>
        <tr class="parent" data-level="0"> <td>Parent category #1</td> </tr> 
            <tr data-level="1"> <td>Subcategory 1.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 1.1.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 1.1.2</td> </tr>
            <tr data-level="1"> <td>Subcategory 1.2</td> </tr>
                <tr data-level="2"> <td>Subcategory 1.2.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 1.2.2</td> </tr>
        <tr class="parent" data-level="0"> <td>Parent category #2</td> </tr> 
            <tr data-level="1"> <td>Subcategory 2.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 2.1.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 2.1.2</td> </tr>
            <tr data-level="1"> <td>Subcategory 2.2</td> </tr>
                <tr data-level="2"> <td>Subcategory 2.2.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 2.2.2</td> </tr>
    </tbody>
</table>

相关文章：