Question

我在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>

任何人都可以帮助我

Answer 1

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

例如，它可以让你在打开其他div时折叠它们。

Answer 2

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap折叠多个按钮和div

2 个答案: