关闭表格折叠行答案

【问题标题】：Closing table collapse rows关闭表格折叠行
【发布时间】：2019-12-09 17:57:42
【问题描述】：

我使用了来自 jquery 的折叠功能，使用了波纹管 HTML 代码。

<table class="table table-hover table-bordered">
    <thead style="background-color: #404e67">
        <tr style="color: white; font-size: 12px; text-align: center;">
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
            <td>Column</td>
        </tr>
    </thead>
    <tbody>
        <tr class="clickable" data-toggle="collapse" data-target="#group-of- 
            rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
            <td>SO#</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-1" class="collapse">
        <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
            <td style="padding-left: 30px;">DO#</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-2" class="collapse">
        <tr>
            <td style="padding-left: 50px;">Event 1</td>
            <td>data 1</td>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
        <tr>
            <td style="padding-left: 50px;">Event 2</td>
            <td>data 1</td>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
    </tbody>
</table>

我的问题是当我单击作为父行的 SO# 时，我想关闭 DO# 行以及事件 1、事件 2 行。但是现在当我点击 SO# 行时，它只会关闭 DO# 行，而不是 Event 1 和 Event 2。

我尝试使用

$("#group-of-rows-2 .collapse").collapse('hide');

但是没有用。

【问题讨论】：

标签： javascript html twitter-bootstrap html-table

【解决方案1】：

我发现多个问题：

您使用了超过 1 次 tbody。只能使用 1 次
$("#group-of-rows-2 .collapse").collapse('hide'); 不正确。你在这里说元素与 id 为 group-of-rows-2 的元素中的类崩溃并且不存在。
最好使用切换。示例：

$(".clickable").click(function(){ $(".group-of-rows-1").toggle(); });

【讨论】：

没问题，所以尝试使用这个 $(".trigger").click(function(){ $(".target").toggle(); });

【解决方案2】：

像这样尝试，我添加了一个 Click Me 来向您展示该功能，然后您可以使用此示例代码随意修改。切换功能动态隐藏和显示，您可以在切换中添加一些选项以添加效果
切换来源https://api.jquery.com/toggle/

$('#group-of-rows-2').click(function(){
      $("#hideMe1").toggle();
      $("#hideMe2").toggle();
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-hover table-bordered">
     <thead style="background-color: #404e67">
    <tr style="color: white; font-size: 12px; text-align: center;"> 
     <td>Column</td><td>Column</td><td>Column</td><td>Column</td></tr>
     </thead>

  <tbody>
    <tr class="clickable" data-toggle="collapse" data-target="#group-of- 
      rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
        <td>SO#</td>
        <td>data</td>
        <td>data</td>  
        <td>data</td>
    </tr>
</tbody>
        <tbody id="group-of-rows-1" class="collapse">
              <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
                <td style="padding-left: 30px;">DO#</td>
                <td>data</td>
                <td>data</td>  
                <td>data</td>
            </tr>
        </tbody>

        <tbody  class="collapse">
            <tr><td id="group-of-rows-2">Click me</td></tr>
              <tr id="hideMe1">
                  <td style="padding-left: 50px;">Event 1</td>
                  <td>data 1</td>
                  <td>data 1</td>  
                  <td>data 1</td>
              </tr>
              <tr id="hideMe2">
                  <td style="padding-left: 50px;">Event 2</td>
                  <td>data 1</td>
                  <td>data 1</td>  
                  <td>data 1</td>
              </tr>
        </tbody>

【讨论】：