jQuery获取两个元素之间的同胞元素(适用于无限分类的显示隐藏)

linwha1990

于 2017-08-14 16:29:19 发布

阅读量2.6k

点赞数

分类专栏： JS 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/linwha1990/article/details/77163235

版权

JS 专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了如何使用jQuery实现点击表格中的父级<tr>元素时，动态显示或隐藏其后的同胞子元素<tr>。提供了具体的jQuery代码示例，实现了无限分类结构中元素的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table class="table table-hover table-mail">
    <tbody>
    <tr class="unread">
        <td >编号</td>
        <td >分类名称</td>
    
        <td class="text-center">操作</td>
    </tr>
        <tr class="read">
            <td ></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr class="child-read">
           <td></td>
           <td></td>
        </tr>

	<tr class="child-read">
           <td></td>
           <td></td>
        </tr>

 	<tr class="read">
            <td ></td>
            <td ></td>
            <td ></td>
        </tr>
    </tbody></table>

jQuery代码

//点击父tr时显示隐藏子tr
$(function () {
        $(this).click(function () {
            var read = $(this).nextUntil(".read");
            if (read.is(":hidden")) {
                read.toggle(
                    function () {
                        read.show();
                    }
                )
            } else {
                read.toggle(
                    function () {
                        read.hide();
                    }
                )
            }
        });
});