Bootstrap 4 COLLAPSIBLE //隐藏其他可折叠的div

Question

我正在尝试制作 4 张图片，点击后会打开可折叠的 div。我得到了那部分，但问题是当我点击第二张图片时，第一张图片中的内容仍然可见。他们需要隐藏 我已经尝试了这里和互联网上的解决方案，但没有成功。

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>
          
                   
     

谢谢

Answer 1

您可以使用 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");
        });
    });