【发布时间】：2020-04-17 12:38:21
【问题描述】：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingOne">
<i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseOne"></i>
<font data-toggle="collapse" data-target="#collapseOne">Header</font>
</div>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingTwo">
<i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseTwo"></i>
<font data-toggle="collapse" data-target="#collapseTwo">Detail</font>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingThree">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
<font data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</font>
</div>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFour">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
<font data-toggle="collapse" data-target="#collapseThree">Debtor Price Detail</font>
</div>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFive">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
<font data-toggle="collapse" data-target="#collapseThree">Tesco</font>
</div>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
</div>我从链接复制的代码：https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion
我只是把按钮改成字体
我的问题是：
代码应该是切换的，但我再单击 1 次以关闭卡体（不起作用）。只需按其他折叠然后关闭。
如何解决。
【问题讨论】：
-
我修复了你的 sn-p（在 html 框中的 html），它按描述工作。您遇到的具体问题是什么？编辑：好的，前 3 个工作如前所述，其他两个是错误的。
-
可以预见：
data-target="#collapseThree"在 4 和 5 -
@freedomn-n 我的问题是这样的...当我打开页面时->collapseOne 会显示，这个没问题...但是我再按一次collapseOne (Detail) 它应该是关闭的但我的结果是什么都没有发生......
-
@freedomn-n 只有我按下其他的collapse，collapseOne 会来。我希望collapseOne 可以自行关闭。
-
它在您的 sn-p 中为我执行此操作 - 打开时“标题 1”展开，单击“标题 1”并折叠，再次单击，展开等。您需要单击文本，而不是 div，即使您已将光标指针放在 div 上
标签： javascript jquery html bootstrap-4