Bootstrap 引导程序4 COLLAPSAE //隐藏其他可折叠的div

5vf7fwbs 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(179)

我试图使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>

谢谢你

twitter-bootstrap

来源：https://stackoverflow.com/questions/63392359/bootstrap-4-collapsae-hide-other-collapsable-divs

1条答案

按热度按时间

sshcrbum1#

你可以用javascript来解决这个问题。

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

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 引导程序4 COLLAPSAE //隐藏其他可折叠的div

1条答案

相关问题

热门标签

最新问答