Question

我想要一个链接（全部折叠），该链接将折叠所有手风琴，然后更改为“全部打开”以打开然后再次全部折叠。

我无法找到与BS4兼容的任何东西，只有BS3。

Answer 1

我认为BS4中没有一个快速的CSS类可以做到这一点。可能像下面这样可以帮助您！？

#showall[data-toggle="collapse"]:after {
  content: "Hide All";
}

#showall[data-toggle="collapse"] .collapsed .show :after {
  content: "Show All";
}

#showall[data-toggle="collapse"].collapsed:after {
  content: "Show All";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<button type="button" class="m-2 btn btn-sm btn-success collapse show" id="showall" data-toggle="collapse" data-target="#div1,#div2"> </button>
<div data-parent="#showall" id="div1" class="card collapse show p-3">
  Content 1
</div>
<div data-parent="#showall" id="div2" class="card collapse show p-3">
  Content 2
</div>

https://codepen.io/R1112/pen/YzKMGEp

Bootstrap 4手风琴折叠/全部展开

1 个答案: