用多个按钮和div折叠
[英]Bootstrap Collapse with multiple button and div
问题描述
I have seen this example of collapse in w3school 
我已经看到了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>
but my question is what happens when i want to use 2 button and 2 div, like i have 2 buttons button 1 will be my first button and button 2 wil be my second button and i have 2 div div 1 will be visible when i click on button 1 but when i click on button 2 i want to hide first div and show 2nd div, and the hide second and show first, 但是我的问题是，当我想使用2按钮和2 div时会发生什么，例如我有2个按钮，按钮1将是我的第一个按钮，按钮2将是我的第二个按钮，而我有2 div div 1将在我点击在按钮1上，但是当我单击按钮2时，我想隐藏第一个div并显示2nd div，然后隐藏第二个div并首先显示，
here is the code with multiple 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>
Can anybody help me out 有人可以帮我吗
2 个解决方案
解决方案1
0 2016-11-03 11:45:40
It sounds like using bootstraps accordion would give you the desired effects: http://getbootstrap.com/javascript/#collapse-example-accordion 听起来像使用Bootstraps手风琴将为您带来理想的效果： http : //getbootstrap.com/javascript/#collapse-example-accordion
It will allow you to collapse other divs when opening one, for instance. 例如，它可以让您在打开一个div时折叠其他div。
解决方案2
0 2016-11-03 12:05:44
You can use any accordion plugins to achieve this. 您可以使用任何手风琴插件来实现此目的。
If you want to go with a small piece of code, go with this: 如果要使用一小段代码，请使用以下代码：
$('#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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.