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 一个自己的 class

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

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

Bootstrap 4 COLLAPSAE // hide other collapsable divs

css

collapse

twitter-bootstrap