Html 引导折叠表

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

下面是我当前的代码，在这段代码中，当我单击第一行时，我不知道如何折叠“隐藏”和“隐藏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>

希登罗先生{
填充：0！重要；
}
测试
隐藏的
隐藏2

使用此示例代替

id=“main”data toggle=“collapseOne”data parent=“#accordion”href=“#collapseOne”aria expanded=“true”aria controls=“collapseOne”

+
1001
9/29/2016
$126.27
1.
衬衫
$12.27
1.
鞋
$62.27

使用此示例代替

id=“main”data toggle=“collapseOne”data parent=“#accordion”href=“#collapseOne”aria expanded=“true”aria controls=“collapseOne”

+
1001
9/29/2016
$126.27
1.
衬衫
$12.27
1.
鞋
$62.27

因为引导程序似乎正在使用

href

调用折叠函数，所以一次折叠的行数不可能超过一行。这是因为href只能保存一个链接，在本例中，该链接是成功折叠的行的id。我尝试了一些技巧，例如使用内联的

onclick=“location.href=”#collapseOne#collapseTwo“

动态地为href提供两个链接，但这不起作用。还尝试从使用href作为折叠器切换到

数据目标

，该操作应与

数据切换

配合使用，以定义多个目标，但也未成功。这似乎是bootstrap的一个公开问题：

这意味着最好的方法是要么使用一些CSS魔法，即

#main:active{.collapse{display:none}}

（仅适用于

less

或

sass

等预处理器），要么编写一些jquery来轻松实现效果

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

此实现仅隐藏目标id，类似于

。toggle（）

而不是

。hide（）

将是双向的

另一种方法是在成功折叠的行中嵌套一个表，这将折叠行中的整个表。但这只是一个唾沫球，我还没有测试过

这里有一些复制品试图解决同样的问题

---

因为引导程序似乎正在使用

href

调用折叠函数，所以一次折叠的行数不可能超过一行。这是因为href只能保存一个链接，在本例中，该链接是成功折叠的行的id。我尝试了一些技巧，例如使用内联的

onclick=“location.href=”#collapseOne#collapseTwo“

动态地为href提供两个链接，但这不起作用。还尝试从使用href作为折叠器切换到

数据目标

，该操作应与

数据切换

配合使用，以定义多个目标，但也未成功。这似乎是bootstrap的一个公开问题：

这意味着最好的方法是要么使用一些CSS魔法，即

#main:active{.collapse{display:none}}

（仅适用于

less

或

sass

等预处理器），要么编写一些jquery来轻松实现效果

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

此实现仅隐藏目标id，类似于

。toggle（）

而不是

。hide（）

将是双向的

另一种方法是在成功折叠的行中嵌套一个表，这将折叠行中的整个表。但这只是一个唾沫球，我还没有测试过

这里有一些复制品试图解决同样的问题

---

你的JS在哪里？什么意思？这只是一个html页面，除了jquery和bootstrap没有脚本这是你的JS？什么意思？这只是一个html页面，除了jquery和bootstrapy之外没有脚本您可以将html更改为

test HIDDEN HIDDEN 2

JS fiddle的工作方式与我需要的工作方式完全相同，当我将它移动到HTML文件中时，它只显示第一个隐藏元素，我很不确定为什么它找不到第二个隐藏元素。当我使用您在评论中添加的HTML时，也会发生同样的情况。第二个tr标记中是否也有

？是的，我完全从JS FIDLE复制了代码，要检查它在我的HTML文件

1衬衫$12.27鞋$62.27

中是否有效，您可以将HTML更改为

test HIDDEN HIDDEN 2

JS小提琴的工作方式与我需要的完全相同工作，但是，当我把它移动到一个HTML文件中时，它只显示第一个隐藏元素，我很不确定为什么它找不到第二个隐藏元素。当我使用你在评论中添加的HTML时也会发生同样的情况。你在第二个tr标记中也有

？是的，我完全从JS FIDLE复制了代码，检查它是否在我的HTML文件中起作用

1衬衫$12.27 1鞋子$62.27