Bootstrap 4切换不隐藏下一个div答案

【问题标题】：Bootstrap 4 toogle not hiding back the next divBootstrap 4切换不隐藏下一个div
【发布时间】：2021-05-07 15:53:52
【问题描述】：

我有两个 div，需要在显示另一个 div 时隐藏一个 div。

我的引导代码如下

但是，在我的情况下，每个 div 都在显示，我的代码没有按预期工作。

请帮忙。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">
          Toggle Bar
        </button>
<div id="Foo" class="collapse">This div (Foo) is hidden by default</div>
<div id="Bar" class="collapse in">
  This div (Bar) is shown by default and can toggle
</div>

【问题讨论】：

标签： javascript html jquery css bootstrap-4

【解决方案1】：

在按钮单击时添加 jquery 以隐藏.collapse div，如下所示：

$('.btn-toggle').click(function(){
  $('.collapse.show').removeClass('show');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<a href="#Foo" class="btn btn-default btn-toggle" data-toggle="collapse">Toggle Foo</a>

<button href="#Bar" class="btn btn-default btn-toggle" data-toggle="collapse">
  Toggle Bar
</button>

<div id="Foo" class="collapse">This div (Foo) is hidden by default</div>
<div id="Bar" class="collapse in">
  This div (Bar) is shown by default and can toggle
</div>

【讨论】：

在这种情况下切换相同的元素不再起作用。

【解决方案2】：

您需要遵循accordion 的逻辑，考虑data-parent 和一个额外的容器。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="main">
<a href="#Foo" class="btn btn-default" data-toggle="collapse" >Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse" >
          Toggle Bar
        </button>
<div id="Foo" data-parent="#main" class="collapse">This div (Foo) is hidden by default</div>
<div id="Bar" data-parent="#main" class="collapse in">
  This div (Bar) is shown by default and can toggle
</div>
</div>

【讨论】：

【解决方案3】：

Bootstrap 折叠只会显示或隐藏特定的相关信息。根据您的要求，您必须选择正确的引导组件并根据您的显示目的应用样式。在您的情况下，您需要使用 Bootstrap Accordion。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">      
      <button data-toggle="collapse" data-parent="#accordion" href="#collapse1">Button 1</button>
      <button data-toggle="collapse" data-parent="#accordion" href="#collapse2">Button 2</button>
      <button data-toggle="collapse" data-parent="#accordion" href="#collapse3">Button 3</button>        
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Button ONe INformation Will show Here.</div>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Button TWO INformation Will show Here.</div>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Button Three INformation Will show Here..</div>
      </div>
    </div>
    
    
  </div>

【讨论】：