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");
        });
    });