如何解决Bootstrap 4 COLLAPSAE //隐藏其他可折叠的div
我正在尝试制作4张图片,当单击时,打开可折叠的div。我得到了那部分,但是问题是,当我单击第二张图片时,第一张图片中的内容仍然可见。他们需要躲起来 我从这里以及整个Internet尝试了解决方案,但没有成功。
jsfiddle:https://jsfiddle.net/pqhz5jLa/
<div class="row">
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%">
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%">
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%" >
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%" >
</div>
</div>
<br>
<div class="collapse" id="collapseExample1" >
<div class="card card-body">
1
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
2
</div>
</div>
<div class="collapse" id="collapseExample3">
<div class="card card-body">
3
</div>
</div>
<div class="collapse" id="collapseExample4">
<div class="card card-body">
4
</div>
</div>
谢谢
解决方法
您可以使用javascript来解决此问题。首先,我将为每个可折叠的div分配一个单独的类
<div class="collapse collapseExample1" id="collapseExample1" >
<div class="card card-body">
1
</div>
</div>
<div class="collapse collapseExample2" id="collapseExample2">
<div class="card card-body">
2
</div>
</div>
<div class="collapse collapseExample3" id="collapseExample3">
<div class="card card-body">
3
</div>
</div>
<div class="collapse collapseExample4" id="collapseExample4">
<div class="card card-body">
4
</div>
</div>
然后这个js应该可以解决问题。
$(document).ready(function(){
$(".collapseExample1").on('show.bs.collapse',function(){
$(".collapseExample2").collapse("hide");
$(".collapseExample3").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample2").on('show.bs.collapse',function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample3").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample3").on('show.bs.collapse',function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample2").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample4").on('show.bs.collapse',function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample2").collapse("hide");
$(".collapseExample3").collapse("hide");
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。