javascript - 如何在使用jquery隐藏的表中显示带有类名的下一行

Question

请告诉我如何在单击主关卡时从 nextall 子关卡中删除类隐藏。它不应该从主关卡旁边的其他子关卡中删除隐藏类。请检查下面的表结构:

<table>
    <tbody>
        <tr>
            <td>
                <a class="mainlevel">
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">
            </td>
        </tr>
        <tr>
            <td>
                <a class="mainlevel">
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">
            </td>
        </tr>
    </tbody>
</table>

Answer 1

如果正确解释问题？ ，尝试使用 .closest() 选择被点击元素的父元素， .nextUntil() ， :has() 选择 tr 元素直到下一个 mainlevel , .find() 选择 .hide 元素 , .toggle() 切换隐藏元素的显示

$(".mainlevel").click(function() {
  $(this).closest("tr").nextUntil("tr:has(.mainlevel)").find(".hide").toggle()
})

.hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td>
                <a class="mainlevel">click</a>
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">a</a>
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">b</a>
            </td>
        </tr>
        <tr>
            <td>
                <a class="mainlevel">click</a>
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">c</a>
            </td>
        </tr>
    </tbody>
</table>