Bootstrap插件collapse源码的学习

最新推荐文章于 2024-07-15 16:47:51 发布

前端小菜鸟

最新推荐文章于 2024-07-15 16:47:51 发布

阅读量2.4k

点赞数

分类专栏：学习笔记 Bootstrap源码阅读 JavaScript

本文链接：https://blog.csdn.net/learninginJAVA/article/details/49386815

版权

本文详细介绍了Bootstrap collapse插件的使用说明、核心思想和具体实现细节。通过data-toggle和data-target属性控制内容区的隐藏与显示，利用'collapse', 'collapsing', 'collapse in'类进行状态管理。在内容区的展示逻辑中，首先检查过渡状态，然后执行相应的展开或收起操作。hide和show方法分别处理内容的隐藏和显示，实现平滑的过渡效果。总结中强调了利用CSS类进行状态控制和利用offsetHeight实现过渡的关键点。" 124698566,9058120,使用xlwings API为单元格添加超链接,"['python', '数据分析', '办公自动化', 'Excel']

摘要由CSDN通过智能技术生成

使用说明

手风琴插件可以分为两部分：可点击的标题区，和展现的内容区

标题区，需要定义data-toggle="collapse"和data-parent="#example"（即包含他们的容器），还有data-target或href指向的内容区
内容区，需要id或class与标题区定义的一致。添加"collapse"类来默认隐藏该内容区。如果需要在一开始就显示就添加"collapse in"类

<div class="panel-group" id="example">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#example" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapi