引导折叠表答案

【问题标题】：Bootstrap Collapsing Table引导折叠表
【发布时间】：2017-06-12 18:18:46
【问题描述】：

当我单击父行时，我试图让几行折叠。目前，我只能折叠一行，但我需要能够同时关闭 +2 行。

以下是我当前的代码，在此代码中，当我单击第一行时，我无法弄清楚如何折叠“HIDDEN”和“HIDDEN 2”行。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.hiddenRow {
    padding: 0 !important;
}
</style>


<div id="accordion" role="tablist" aria-multiselectable="true">
  <table class="table">
    <tr id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <td>
        test
      </td>
    </tr>

    <tr>
      <td class="hiddenRow">
        <div id="collapseOne" class="collapse in" aria-labelledby="headingOne">HIDDEN</div>
      </td>
    </tr>

    <tr>
      <td class="hiddenRow">
        <div id="collapseTwo" class="collapse in" aria-labelledby="headingTwo">HIDDEN 2</div>
      </td>
    </tr>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

【问题讨论】：

你的 JS 呢？
什么意思？这只是一个 html 页面，除了 jquery 和 bootstrap 之外没有其他脚本

标签： html css twitter-bootstrap

【解决方案1】：

使用此示例代替 id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"。 https://jsfiddle.net/ayang10/DTcHh/33622/

<tr data-toggle="collapse" data-target=".order1">
  <td>+</td>
  <td>1001</td>
  <td>9/29/2016</td>
  <td>$126.27</td>
</tr>
<tr class="collapse order1">
  <td>1</td>
  <td></td>
  <td>Shirt</td>
  <td>$12.27</td>
</tr>
<tr class="collapse order1">
  <td>1</td>
  <td></td>
  <td>Shoes</td>
  <td>$62.27</td>
</tr>

【讨论】：

你可以把html改成<table class="table"> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr data-toggle="collapse" data-target=".order1"> <td> test </td> </tr> <tr class="collapse order1"> <td>HIDDEN</td> </tr> <tr class="collapse order1"> <td>HIDDEN 2</td> </tr> </tbody> </table>
JS fiddle 完全按照我需要的方式工作，但是，当我将它移动到 HTML 文件中时，它只显示第一个隐藏元素，我非常不确定它为什么会这样找不到第二个隐藏元素
当我使用您在评论中添加的html时也会发生同样的情况
你在第二个 tr 标签中也有<tr class="collapse order1"> 吗？
是的，我完全从 JS fiddle 复制了代码，以检查它是否在我的 HTML 文件 <tr class="collapse order1"> <td>1</td> <td></td> <td>Shirt</td> <td>$12.27</td> </tr> <tr class="collapse order1"> <td>1</td> <td></td> <td>Shoes</td> <td>$62.27</td> </tr> 中工作

【解决方案2】：

因为似乎 bootstrap 正在使用 href 调用折叠函数，所以一次折叠多行是不可能的。这是因为 href 只能保存一个链接，在本例中是成功折叠的行的 id。我尝试了一些技巧，例如使用内联 onclick="location.href = '#collapseOne #collapseTwo'" 动态地为 href 提供两个链接，但这不起作用。还尝试从使用 href 作为折叠器切换到 data-target，这应该与 data-toggle 一起定义多个目标，但也没有成功。这似乎是引导程序的一个未解决问题：

https://github.com/twbs/bootstrap/issues/19813

这意味着最好的方法是要么使用一些 CSS 魔法，即 #main:active {.collapse {display:none}}（仅适用于 less 或 sass 之类的预处理器），要么编写一些 jquery 来轻松实现效果。

$(document).ready(function() {
    $("#main").on("click", function(){
        $("#collapseOne, #collapseTwo").hide();
    });
});

此实现仅隐藏目标 id，例如 .toggle() 而不是 .hide() 将是双向的。

另一种方法是在成功折叠的行内嵌套一个表格，这应该将整个表格折叠在该行内。但这只是一个吐痰球，我还没有测试过。

这里有一些副本试图解决相同的问题！

Expand/collapse multiple table rows with a more elegant solution

expand/collapse table rows with JQuery

【讨论】：