Bootstrap 4折叠仅在第二次单击时起作用

问题描述

我遇到的问题是this，但使用的是引导程序4。我想使用collapse 功能，默认情况下显示内容。问题在于，内容不会随着第一次单击而隐藏，而只会随着第二次单击而隐藏。显示该问题here：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
</button>

<div class="collapse.show in" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

解决方法

只需在show中添加collapse类，而不在collapse.show中添加-您的code其余所有内容都很好！

实时演示：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>

<div class="collapse show" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

bootstrap-4 twitter-bootstrap