带有多个按钮和 div 的 Bootstrap 折叠答案

【问题标题】：Bootstrap Collapse with multiple button and div带有多个按钮和 div 的 Bootstrap 折叠
【发布时间】：2017-03-16 23:38:08
【问题描述】：

我在 w3school 看到过这个崩溃的例子

    <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>

但我的问题是当我想使用 2 个按钮和 2 个 div 时会发生什么，就像我有 2 个按钮一样按钮 1 将是我的第一个按钮，按钮 2 将是我的第二个按钮我有 2 个 div 当我单击按钮 1 时 div 1 将可见，但是当我单击按钮 2 时，我想隐藏第一个 div 并显示第二个 div，隐藏第二个并首先显示，

这里是多个div的代码

    <div class="container" ng-app="myApp" ng-controller="customersCtrl">
  <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Company Details</button>
  <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1">Commercial Details</button>
  <div id="demo" class="collapse" >
      1st div
  </div>

  <div id="demo1" class="collapse">
    2nd div
  </div>
</div>

谁能帮帮我

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您可以使用任何手风琴插件来实现这一点。

如果您想使用一小段代码，请使用以下代码：

$('#btn1').click(function(){
  $('.collapse').hide();
  $('#demo').show();
});
$('#btn2').click(function(){
  $('.collapse').hide();
  $('#demo1').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
  <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo" id="btn1" >Company Details</button>
  <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1" id="btn2">Commercial Details</button>
  <div id="demo" class="collapse" >
    1st div
  </div>

  <div id="demo1" class="collapse">
    2nd div
  </div>
</div>

【讨论】：

【解决方案2】：

听起来使用 bootstraps 手风琴会给你想要的效果：http://getbootstrap.com/javascript/#collapse-example-accordion

例如，它允许您在打开一个 div 时折叠其他 div。

【讨论】：