Bootstrap基本插件学习笔记之折叠(22)
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
折叠（Collapse）插件可以很容易地让页面区域折叠起来。
0x01 例子
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果如下：
这里有个新的属性：data-parent ，用于把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
0x02 JS方式
也可以通过JS代码来动态显示：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果如下：
初始全部是折叠状态，因为toggle初始化均为false。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：Bootstrap基本插件学习笔记之轮播幻灯片(23)