带有多个按钮和 div 的 Bootstrap 折叠
Posted
技术标签:
【中文标题】带有多个按钮和 div 的 Bootstrap 折叠【英文标题】：Bootstrap Collapse with multiple button and div 【发布时间】：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>
谁能帮帮我
【问题讨论】：
【参考方案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。
【讨论】：
以上是关于带有多个按钮和 div 的 Bootstrap 折叠的主要内容，如果未能解决你的问题，请参考以下文章
MODX (Evo) 同上和带有多个 DIV 的轮播，其中需要加载子资源 ID
jquery bootstrap Validation：多个输入值的总和，如果不等于其他输入字段，则禁用提交按钮