Question

当我点击父行时，我试图让几行折叠。目前，我只能折叠一行，但我需要能够同时关闭+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>

Answer 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>

Answer 2

因为似乎引导程序正在使用href来调用折叠函数，所以一次折叠不可能超过行。这是因为href只能包含一个链接，在这种情况下，该链接是成功折叠的行的id。我尝试了一些hacks，比如使用内联onclick="location.href = '#collapseOne #collapseTwo'"来动态地给href两个链接，但这不起作用。还试图从使用href作为collapser切换到data-target，这应该与data-toggle一起定义多个目标，但也不成功。这看起来像是bootstrap的一个开放问题：

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

Bootstrap折叠表

2 个答案: