几个关键的属性
.collapse 用法class="collapse" 该元素被折叠
.collapse.in 用法class="collapse in" 展开该元素
data-parent="#selector" 保证parent下只有1个元素处于展开状态
这个属性的作用：展开当前元素时，折叠其它暂开的元素，实现parent下只有1个元素处于展开状态
如果不加该属性，则所有可折叠元素的折叠状态互不影响
设置id属性，然后用button或anchor标签，使用id选择器控制目标
通过按钮控制折叠
在按钮上设置data属性，如
data-toggle="collapse" data-target="#collapseFirst" data-parent="#accordion"
使用javascript进行操作,可以指定toggle和parent属性
$(".collapse").collapse()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
rel="stylesheet" media="screen">
<style>
body {
padding: 50px; /*边距*/
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 通过按钮的data-target属性控制目标是否折叠（控制折叠方式一） -->
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapseFirst" data-parent="#accordion">
使用按钮折叠A
</button>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<!-- 超链接控制折叠 -->
<a data-toggle="collapse" href="#collapseFirst" data-parent="#accordion">
使用超链接折叠A
</a>
</h4>
</div>
<!-- 初始处于展开状态-->
<div id="collapseFirst" class="panel-collapse collapse in">
<div class="panel-body">
AAAAAAAAAAAAAAAAAAAAAAAA
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<!-- 超链接控制折叠 -->
<a data-toggle="collapse" href="#collapseSecond" data-parent="#accordion">
使用超链接折叠B
</a>
</h4>
</div>
<!-- 初始处于被折叠状态-->
<div id="collapseSecond" class="panel-collapse collapse">
<div class="panel-body">
BBBBBBBBBBBBBBBBBBBBBBBBB
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<!-- 超链接控制折叠 -->
<a data-toggle="collapse" href="#collapseThird" data-parent="#accordion">
使用超链接折叠C
</a>
</h4>
</div>
<!-- 初始处于被折叠状态-->
<div id="collapseThird" class="panel-collapse collapse">
<div class="panel-body">
CCCCCCCCCCCCCCCCCCCCCCCCCC
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../jquery/jquery-10.0.2.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
相关推荐
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
下面通过本文给大家介绍Bootstrap 折叠（Collapse）插件用法实例，一起看看吧！ 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 如果您想要...
Bootstrap 折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 如果您想要单独引用该插件的功能，那么您需要引用 collapse....
您必须引用 jquery.js 和 bootstrap-collapse.js – 这两个 JavaScript 文件都位于 docs/assets/js 文件夹内。 您可以在不编写大量 JavaScript 或者不调用 JavaScript 的情况下创建可折叠的组件。 实例 第一个实例...
今天做的项目，用到了bootstrap的折叠功能，这个功能需要只展开一个折叠框，点击一个就会自动隐藏另一个，初始按照API做了一下，发现一切运行正常，但是测试的同事提了一个bug，说切换到其他模块后再切换回来，发现...
sb-admin2-sidebar-toggle-collapse 我修改了 SB Admin2，这是 Bootstrap 的管理主题。 顶部菜单固定固定顶部导航栏侧边菜单的展开和收缩（？）Sidebar Toggle详情请参阅以下博客。 许可证等遵循原始 SB Admin2。
BootstrapCollapse 使用 bootstrap 折叠组件 Demo 的简单方法： : 开始$('#collapse').collapse(panel);使用样式$('#collapse').collapse(panel, {style: Collapse.STYLE_DEFAULT}); 有 6 种样式可以应用于折叠...
如果您想要单独引用该插件的功能，那么您需要引用 collapse.js，或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 一、用法 下表列出了折叠（Collapse）插件...
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar...为了实现以上这些功能，您必须包含 Bootstrap 折叠
1. 基础折叠 展示如下： <body> <!-- 按钮 --> <button class=btn btn-default data-toggle=collapse data-target=#shows>按钮</button> <!-- 折叠内容 --> ...
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 实例 折叠 Lorem ipsum dolor text.... 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ); 点击按钮后会在隐藏与显示之间切换。 ...
Bootstrap 折叠（Collapse）插件 264 用法 267 选项 267 方法 268 事件 271 Bootstrap 轮播（Carousel）插件 274 实例 274 用法 277 选项 278 方法 278 事件 281 Bootstrap 附加导航（Affix）插件 284 用法 284 通过...
想做一个先按层级排序并可以多选的功能，首先倾向于用多层标签式的，直接选定加在文本域里， 查到这...第二层选项可以折叠/展开到第一层下面，用bootstrap的 data-toggle="collapse" data-target="#demo1" 进行关联第二
折叠（Collapse）插件可以很容易地让页面区域折叠起来。 0x01 例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题，可以让其对应的内容显示或隐藏 <div class=panel-group id=accordion> <div class=panel-heading> <h4 class=panel-title>标题一...
折叠菜单的效果，网上有很多的插件，比如bootstrap的 Collapse ，很好用也很简单，但是如果你使用的不是bootstrap框架，就会造成很多不必要的麻烦，比如默认样式被修改，代码冗余等等，一般网上也有很多基于jQuery的...
其中data-toggle值设置为 collapse，data-target=”#折叠区标识符”。 第一步，设计一个面板组合，里面有三个折叠区： <div class=panel-group id=myAccordion> <div class=panel></div> <div class=panel></div...