javascript - 切换

Question

我正在尝试隐藏所属行。例如，如果您单击“子标题 1”，则将仅隐藏项目 1、项目 2 和项目 3 行。

示例:

<table border="1">
 <tbody>
  <tr class="head">
   <td> title </td>
  </tr>
  <tr class="sub-title">
     <td>Sub Title 1</td>
  </tr>
   <tr> <td>Item 1</td> </tr>
   <tr> <td>Item 2</td> </tr>
   <tr> <td>Item 3</td> </tr>
   <tr class="sub-title">
     <td>Sub Title 2</td>
   </tr>
   <tr> <td>Item 4</td> </tr>
   <tr> <td>Item 5</td> </tr>
   <tr> <td>Item 6</td> </tr>
  </tbody>
</table>

-

$('.sub-title').click( function() {
    $(this).parent().nextUntil('.sub-title').toggle();
})

好像没用...

Answer 1

nextUntil 选择 sibling ，而不是 child 。从通话中删除“家长”。

编辑以回答有关根据类别排除某些行的进一步问题。显然，您也可以适应 Kolink 关于防止切换的“display: block”覆盖默认的“display: table-row”的响应，但只要您在所有支持的浏览器中进行测试，我就不会发现使用切换有任何问题。

$('.sub-title').click( function() {
   $(this).nextUntil('.sub-title').each(function() {
        if (!$(this).hasClass('order')) 
            $(this).toggle();
    });
});