文章の目录

1、工作原理
2、示例
3、多目标
4、手风琴示例
5、可及性
6、用法
- 6.1、通过data属性
- 6.2、通过JavaScript
- 6.3、选项
- 6.4、方法
- - 6.4.1、.collapse(options)
  - 6.4.2、.collapse('toggle')
  - 6.4.3、.collapse('show')
  - 6.4.4、.collapse('hide')
  - 6.4.5、.collapse('dispose')
- 6.5、事件
写在最后

通过一些类和我们的JavaScript插件在项目中切换内容的可见性。

1、工作原理

JavaScript插件用于显示和隐藏内容。按钮或锚点用作映射到您切换的特定元素的触发器。折叠元素将使高度从当前值变为0。考虑到CSS处理动画的方式，你不能在.collapse元素上使用填充。相反，应该将类用作独立的包装元素。

该组件的动画效果依赖于preferred -reduced-motion media查询。

2、示例

单击按钮通过类更改来显示和隐藏另一个元素

.collapse 隐藏内容
.collapsing 应用在过渡期间
.collapse.show 展示内容

通常，我们建议使用带有data-target属性的按钮。虽然不建议从语义的角度来看，但您也可以使用带有href属性的链接(以及role="button")。在这两种情况下，data-toggle="collapse"都是必需的。

<p><a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
</p>
<div class="collapse" id="collapseExample"><div class="card card-body">Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</div>
</div>

3、多目标

<button>或<a>可以通过在href或data-target属性中使用JQuery选择器引用多个元素来显示和隐藏它们。多个<button>或<a>可以显示和隐藏一个元素，如果它们各自用它们的href或data-target属性引用它

<p><a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button><button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row"><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample1"><div class="card card-body">Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.</div></div></div><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample2"><div class="card card-body">Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.</div></div></div>
</div>

4、手风琴示例

使用card组件，可以扩展默认折叠行为以创建手风琴。要正确地实现手风琴样式，请确保使用.accordion作为包装器。

<div class="accordion" id="accordionExample"><div class="card"><div class="card-header" id="headingOne"><h2 class="mb-0"><button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</button></h2></div><div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"><div class="card-body">Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.</div></div></div><div class="card"><div class="card-header" id="headingTwo"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</button></h2></div><div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"><div class="card-body">Some placeholder content for the second accordion panel. This panel is hidden by default.</div></div></div><div class="card"><div class="card-header" id="headingThree"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3</button></h2></div><div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"><div class="card-body">And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.</div></div></div>
</div>

5、可及性

请确保将aria-expanded添加到控件元素。这个属性将绑定到控件的可折叠元素的当前状态显式地传达给屏幕阅读器和类似的辅助技术。如果可折叠元素默认关闭，则控制元素的属性值应为aria-expanded="false"。如果使用show类将可折叠元素设置为默认打开状态，则在控件上设置aria-expanded="true"。插件会根据可折叠元素是否被打开来自动切换该属性

如果你的控制元素是针对一个单一的可折叠元素，即data-target属性指向一个id选择器，你应该添加aria-controls属性到控制元素，包含可折叠元素的id。现代屏幕阅读器和类似的辅助技术利用这个属性为用户提供额外的快捷方式来直接导航到可折叠元素本身。

注意，Bootstrap当前的实现没有涵盖WAI-ARIA Authoring Practices 1.1手风琴模式中描述的各种键盘交互—您需要自己用自定义JavaScript包含这些交互。

6、用法

折叠插件利用几个类来处理繁重的任务

.collapse 隐藏内容
.collapsing 应用在过渡期间
.collapse.show 展示内容

这些类可以在transitions.scss中找到。

6.1、通过data属性

只需向元素添加data-toggle="collapse"和data-target，就可以自动分配一个或多个可折叠元素的控制权。data-target属性接受一个CSS选择器，以便对其应用折叠。请确保将类collapse添加到可折叠元素中。如果您想让它默认打开，可以添加额外的类show。

要在可折叠区域中添加类似手风琴的组管理，请添加数据属性data-parent="#selector"。

6.2、通过JavaScript

手动启动

$('.collapse').collapse()

6.3、选项

选项可以通过data属性或JavaScript传递。对于数据属性，将选项名称附加到data-，如data-parent=""。

6.4、方法

异步方法和转换
所有API方法都是异步的，并开始转换。它们在转换开始后立即返回给调用者，但在转换结束前返回。此外，对转换组件的方法调用将被忽略。

6.4.1、.collapse(options)

将内容激活为可折叠元素。接受一个可选的选项对象。

$('#myCollapsible').collapse({toggle: false
})

6.4.2、.collapse(‘toggle’)

将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前返回给调用者(即在shown.bs.collapse或hidden.bs.collapse事件发生之前)。

6.4.3、.collapse(‘show’)

显示可折叠元素。在可折叠元素实际显示之前返回给调用者(即在shown.bs.collapse事件发生之前)。

6.4.4、.collapse(‘hide’)

隐藏可折叠元素。在可折叠元素被隐藏之前返回给调用者(即在hidden.bs.collapse事件发生之前)。

6.4.5、.collapse(‘dispose’)

销毁折叠元素

6.5、事件

Bootstrap的折叠类暴露了一些与折叠功能挂钩的事件

$('#myCollapsible').on('hidden.bs.collapse', function () {// do something...
})

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Bootstrap系列之折叠（Collapse）相关推荐

ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
Bootstrap 折叠(collapse)插件面板
折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...
bootstrap中jquery插件——collapse折叠效果-手风琴效果
先来掌握collapse插件的基本用法,再慢慢深入实例. collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下: <a class="btn b ...
用bootstrap写一个折叠面板
1:创建一个html文件 2:选择语言 3:输入创建框架 4:导入bootstrap的css样式(没有的请去官网下载),可选择botstrap.min.css或者botstrap.css(min是压缩 ...
Bootstrap系列 -- 41. 带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个"navbar-form",使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.nav ...
bootstrap 导航菜单折叠位置_python测试开发django44.xadmin自定义菜单项
前言 xadmin后台的菜单项是放到一个app下的,并且里面的排序是按字母a-z排序,有时候我们需要划分多个项,需要自定义菜单列表,可以通过重写CommAdminView类实现. xadmin后台提供 ...
Bootstrap系列之Reboot
文章の目录 1.Approach 2.Page defaults 3.Native font stack 4.Headings and paragraphs 5.Lists 6.Preformatte ...
ASP.NET MVC使用Bootstrap系列（1）——开始使用Bootstrap
阅读目录 Bootstrap结构介绍在ASP.NET MVC 项目中添加Bootstrap文件为网站创建Layout布局页使用捆绑打包和压缩来提升网站性能在Bootstrap项目中使用捆绑打包 ...
Bootstrap系列 -- 38. 基础导航条
在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第 ...
一步一步学习Bootstrap系列--表单布局
前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

Bootstrap系列之折叠（Collapse）