用多个按钮和div折叠

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 div 1将在我点击在按钮1上，但是当我单击按钮2时，我想隐藏第一个div并显示2nd 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时折叠其他div。

Answer 2

您可以使用任何手风琴插件来实现此目的。

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

 $('#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>

用多个按钮和div折叠

问题描述

2 个解决方案

解决方案1
0 2016-11-03 11:45:40

解决方案2
0 2016-11-03 12:05:44

用多个按钮和div折叠

问题描述

2 个解决方案

解决方案1 0 2016-11-03 11:45:40

解决方案2 0 2016-11-03 12:05:44

解决方案1
0 2016-11-03 11:45:40

解决方案2
0 2016-11-03 12:05:44