Bootstrap4 折叠

Bootstrap4 折叠Collapse学习笔记一、基本概念折叠组件Collapse用于内容的显示/隐藏切换常用于手风琴、FAQ 面板等场景。核心机制是通过data-*属性或 JavaScript 控制元素的展开与收起。二、基本用法1. 通过 data 属性无需 JS!-- 触发器 --buttonclassbtn btn-primarytypebuttondata-togglecollapsedata-target#collapseExamplearia-expandedfalsearia-controlscollapseExample点击展开/收起/button!-- 折叠内容 --divclasscollapseidcollapseExampledivclasscard card-body这是一段可折叠的内容。/div/div2. 通过链接触发aclassbtn btn-primarydata-togglecollapsehref#collapseExamplerolebuttonaria-expandedfalsearia-controlscollapseExample链接触发/a区别button用data-targeta用href。3. 通过 JavaScript 触发$(#collapseExample).collapse({toggle:true});三、关键属性说明属性说明data-togglecollapse声明触发折叠行为data-target#id指定目标元素按钮用href#id指定目标元素链接用aria-expanded标识展开状态true/falsearia-controls指向被控内容的 id增强无障碍.collapse隐藏内容.collapse.show显示内容.collapsing过渡动画中的临时类四、手风琴Accordion手风琴是折叠的经典应用同一组内同时只能展开一个面板。divclassaccordionidaccordionExample!-- 面板一 --divclasscarddivclasscard-headeridheadingOneh2classmb-0buttonclassbtn btn-linktypebuttondata-togglecollapsedata-target#collapseOnearia-expandedtruearia-controlscollapseOne面板一标题/button/h2/divdividcollapseOneclasscollapse showaria-labelledbyheadingOnedata-parent#accordionExampledivclasscard-body面板一的内容默认展开。/div/div/div!-- 面板二 --divclasscarddivclasscard-headeridheadingTwoh2classmb-0buttonclassbtn btn-link collapsedtypebuttondata-togglecollapsedata-target#collapseTwoaria-expandedfalsearia-controlscollapseTwo面板二标题/button/h2/divdividcollapseTwoclasscollapsearia-labelledbyheadingTwodata-parent#accordionExampledivclasscard-body面板二的内容。/div/div/div!-- 面板三 --divclasscarddivclasscard-headeridheadingThreeh2classmb-0buttonclassbtn btn-link collapsedtypebuttondata-togglecollapsedata-target#collapseThreearia-expandedfalsearia-controlscollapseThree面板三标题/button/h2/divdividcollapseThreeclasscollapsearia-labelledbyheadingThreedata-parent#accordionExampledivclasscard-body面板三的内容。/div/div/div/div手风琴核心要点data-parent#accordionExample指定父容器 id确保同组内互斥展开去掉data-parent则各面板可独立展开非互斥默认展开的面板加.show对应按钮不加.collapsed五、多目标切换一个触发器可以同时控制多个折叠区域buttonclassbtn btn-primarytypebuttondata-togglecollapsedata-target.multi-collapse同时切换多个区域/buttondivclasscollapse multi-collapseidfirstdivclasscard card-body第一个区域/div/divdivclasscollapse multi-collapseidseconddivclasscard card-body第二个区域/div/div原理data-target使用类选择器.multi-collapse匹配所有同类元素。六、JavaScript 方法方法说明.collapse(options)初始化传入配置对象.collapse(toggle)切换显示/隐藏.collapse(show)显示.collapse(hide)隐藏.collapse(dispose)销毁实例// 初始化并配置$(#myCollapse).collapse({toggle:false// 初始化时不自动切换});// 手动控制$(#myCollapse).collapse(show);$(#myCollapse).collapse(hide);$(#myCollapse).collapse(toggle);七、配置选项选项类型默认值说明parentselector | DOM | jQueryfalse父容器实现互斥展开togglebooleantrue初始化时是否切换可通过 data 属性设置divclasscollapsedata-parent#myAccordion八、事件事件说明show.bs.collapse调用 show 后立即触发shown.bs.collapse完全显示后触发动画完毕hide.bs.collapse调用 hide 后立即触发hidden.bs.collapse完全隐藏后触发动画完毕$(#myCollapse).on(shown.bs.collapse,function(){console.log(内容已展开);});$(#myCollapse).on(hidden.bs.collapse,function(){console.log(内容已收起);});九、CSS 过渡状态折叠动画依赖三个 CSS 类的切换收起 → 展开 .collapse → .collapsing → .collapse.show 展开 → 收起 .collapse.show → .collapsing → .collapse类名状态.collapse隐藏height: 0.collapsing过渡中动态设置height.collapse.show显示height: auto如需禁用动画.collapsing{transition:none!important;}十、完整示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleBootstrap4 折叠示例/titlelinkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/css/bootstrap.min.cssstyle.card-header button{width:100%;text-align:left;}/style/headbodydivclasscontainer mt-4h4基础折叠/h4pbuttonclassbtn btn-primarytypebuttondata-togglecollapsedata-target#basicCollapse展开/收起/button/pdivclasscollapseidbasicCollapsedivclasscard card-body这是一段可以折叠的内容点击按钮即可切换显示状态。/div/divhrh4classmt-4手风琴/h4divclassaccordionidmyAccordiondivclasscarddivclasscard-headeridh1buttonclassbtn btn-linkdata-togglecollapsedata-target#c1aria-expandedtrue第一章概述/button/divdividc1classcollapse showaria-labelledbyh1data-parent#myAccordiondivclasscard-body第一章的内容默认展开。/div/div/divdivclasscarddivclasscard-headeridh2buttonclassbtn btn-link collapseddata-togglecollapsedata-target#c2第二章进阶/button/divdividc2classcollapsearia-labelledbyh2data-parent#myAccordiondivclasscard-body第二章的内容。/div/div/divdivclasscarddivclasscard-headeridh3buttonclassbtn btn-link collapseddata-togglecollapsedata-target#c3第三章实战/button/divdividc3classcollapsearia-labelledbyh3data-parent#myAccordiondivclasscard-body第三章的内容。/div/div/div/div/divscriptsrchttps://cdn.jsdelivr.net/npm/jquery3.5.1/dist/jquery.slim.min.js/scriptscriptsrchttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/js/bootstrap.bundle.min.js/script/body/html十一、注意事项data-targetvshrefbutton必须用data-targeta可用href两者不要混用data-parent实现互斥手风琴效果的关键值必须指向外层容器的选择器初始展开给目标元素加.show触发按钮不加.collapsed动画依赖height折叠动画通过动态设置height实现如果内容有padding/margin异常可能导致动画不流畅嵌套折叠支持嵌套但内层data-parent应指向内层容器避免外层误关闭无障碍始终添加aria-expanded和aria-controls方便屏幕阅读器识别