Bootstrap插件collapse源码的学习

最新推荐文章于 2025-04-02 10:12:06 发布

前端小菜鸟

最新推荐文章于 2025-04-02 10:12:06 发布

阅读量2.5k

点赞数

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

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

版权

JavaScript 同时被 3 个专栏收录

35 篇文章

订阅专栏

学习笔记

19 篇文章

订阅专栏

Bootstrap源码阅读

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用说明

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

标题区，需要定义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 sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#example" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

核心思想

页面完成加载后，为data-toggle="collapse"的初始化点击事件
内容区的展现逻辑：
- 找到容器内是否有正在过渡的元素，若有则直接return，暂不响应
- 若当前容器有其他元素已展开，调用Plugin(actives, 'hide')，完成这些元素的收起逻辑
- 去除"collapse"类增加"collapsing"类使内容区展开。
- 最后在过渡效果的回调去除"collapsing"类，增加"collapse in"类，是内容区保持展开
内容区的收起逻辑：
- 为内容区元素增加"collapsing"类删除"collapse in"类，使其收起
- 在过渡效果的回调里删除"collapsing"类，增加"collapse"类使其保持收起状态

具体分析

show方法

Collapse.prototype.show = function () {
  if (this.transitioning || this.$element.hasClass('in')) return

  var activesData
  // 同一个容器中，已经展开的target
  var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')

  if (actives && actives.length) {
    activesData = actives.data('bs.collapse')
    if (activesData && activesData.transitioning) return
  }

  var startEvent = $.Event('show.bs.collapse')
  this.$element.trigger(startEvent)
  if (startEvent.isDefaultPrevented()) return

  if (actives && actives.length) {
    Plugin.call(actives, 'hide') // 通过Plugin这个入口，完成当前展开target的隐藏
    activesData || actives.data('bs.collapse', null)
  }

  var dimension = this.dimension()

  this.$element
    .removeClass('collapse')// 去除collapse类，展示内容区
    .addClass('collapsing')[dimension](0) // 限制内容区高度
    .attr('aria-expanded', true)

  this.$trigger
    .removeClass('collapsed') // 仅做标记
    .attr('aria-expanded', true)

  this.transitioning = 1

  var complete = function () {
    this.$element
      .removeClass('collapsing')// 去除对内容区高度的限制
      .addClass('collapse in')[dimension]('') // 让内容区保持展开
    this.transitioning = 0
    this.$element
      .trigger('shown.bs.collapse')
  }

  if (!$.support.transition) return complete.call(this)

  var scrollSize = $.camelCase(['scroll', dimension].join('-'))

  // 在内容区展开后调用compele事件，完成样式变更
  // 但是找不到在哪里修改了元素的height值，使其产生过渡事件
  this.$element
    .one('bsTransitionEnd', $.proxy(complete, this))
    .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
}

hide方法

Collapse.prototype.hide = function () {
  if (this.transitioning || !this.$element.hasClass('in')) return

  var startEvent = $.Event('hide.bs.collapse')
  this.$element.trigger(startEvent)
  if (startEvent.isDefaultPrevented()) return

  var dimension = this.dimension()
  // $el['height']()跟$el.css('height')一样，可以获取和设置高度
  this.$element[dimension](this.$element[dimension]())[0].offsetHeight

  this.$element
    .addClass('collapsing')
    .removeClass('collapse in')
    .attr('aria-expanded', false)

  this.$trigger
    .addClass('collapsed')
    .attr('aria-expanded', false)

  this.transitioning = 1

  var complete = function () {
    this.transitioning = 0
    this.$element
      .removeClass('collapsing')
      .addClass('collapse')
      .trigger('hidden.bs.collapse')
  }

  if (!$.support.transition) return complete.call(this)

  this.$element
    [dimension](0)
    .one('bsTransitionEnd', $.proxy(complete, this))
    .emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}