Javascript 切换<；TR>；

我试图隐藏属于我的行。例如，如果单击“子标题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").on("click",function() {
    $(this).nextUntil(".sub-title").each(function() {
        this.style.display = this.style.display == "none" ? "" : "none";
    });
});

---

nextUntil选择兄弟姐妹，而不是孩子。从通话中删除“家长”

编辑以回答有关基于类排除某些行的进一步问题。显然，您也可以接受Kolink关于防止toggle的“display:block”覆盖默认的“display:table row”的响应，但只要您在所有受支持的浏览器中进行测试，我看不到使用toggle有任何问题

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

---

不幸的是，您不能像这样修改

tr

元素，除非您更改它们的

display

属性。。。但我不推荐这个；-）我同意@ahren，而且

.click（）

不是一个好的做法，你应该使用

.on（'click'）

。您是否意识到JQuery语句中缺少分号？JQuery文档（）说.Click（）和.on（'Click'）之间没有区别，我试图隐藏所属的行。例如，如果您单击“子标题1”，它将隐藏项目1、项目2、项目3行..谢谢..这似乎有效。。最后一个问题-如果任何tr具有“order”类名，则不要隐藏它。。如何做到这一点？例如：

if（！$（this）.hasClass（'order'））{}

噢，我让它工作了

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