切換<TR>

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

您必須手動切換：

$(".sub-title").on("click",function() {
    $(this).nextUntil(".sub-title").each(function() {
        this.style.display = this.style.display == "none" ? "" : "none";
    });
});

Answer 2

nextUntil選擇兄弟姐妹，而不是孩子。 從通話中刪除“父母”。

編輯回答關於基於類排除某些行的進一步問題。 顯然，您也可以接受Kolink關於防止切換的“display：block”覆蓋默認“display：table-row”的響應，但只要您在所有支持的瀏覽器中進行測試，我就不會發現使用切換有任何問題。

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