Bootstrap使用多个按钮和div折叠 [英] Bootstrap Collapse with multiple button and div
本文介绍了Bootstrap使用多个按钮和div折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经在w3school中看到了这个崩溃的例子
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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>简单的可折叠< / h2>
< button type =buttonclass =btn btn-infodata-toggle =collapsedata-target =＃demo>简单的可折叠< / button>
< div id =democlass =collapse>
Lorem ipsum dolor sit amet，consectetur adipisicing elit，
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。你可以在任何时间，任何地点，任何地点，任何地点，任何地点，任何地点，任何地点，任何地点。
< / div>
< / div>
< / body>
< / html>
但是我的问题是当我想使用2个按钮和2个div时会发生什么，就像我有2个按钮
按钮1将是我的第一个按钮，而按钮2将是我的第二个按钮
，并且我有2个div
div 1将在我点击按钮1时可见，但是当我点击按钮时2我想隐藏第一个div并显示第二个div，第二个隐藏第一个显示，
这里是带多个div的代码
< div class =containerng-app =myAppng-controller =customersCtrl>
< button type =buttonclass =btn btn-defaultdata-toggle =collapsedata-target =＃demo>公司详情< / button>
< div id =democlass =collapse>
1st div
< / div>
< div id =demo1class =collapse>
2nd div
< / div>
< / div>
任何人都可以帮助我
解决方案
您可以使用任何手风琴插件来实现此目的。
如果您想要使用一小段代码，请使用以下代码：
$（'＃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 =容器ng-app =myAppng-controller =customersCtrl> < button type =buttonclass =btn btn-defaultdata-toggle =collapsedata-target =＃demoid =btn1>公司详情< / button> < button type =buttonclass =btn btn-defaultdata-toggle =collapsedata-target =＃demo1id =btn2>商业细节< / button> < div id =democlass =collapse> 1st div< / div> < div id =demo1class =collapse>第二格< / div>< / div>
I have seen this example of collapse in 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,
here is the code with multiple 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
解决方案
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>
这篇关于Bootstrap使用多个按钮和div折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
