Bootstrap插件collapse源码的学习

使用说明

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

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

  

    

      

        
          Collapsible Group Item #1
        
      
    
    

      

        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.
      
    
  
  

    

      

        
          Collapsible Group Item #2
        
      
    
    

      

        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.
      
    
  

核心思想

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

总结：

• 利用"collapse"类保持元素隐藏，"collapsing"类实现过渡效果，"collapse in"类保持展开。这样状态转移比较明确
  
• 可以利用el.offsetHeight获得设置了height: 0px的内容高度。这样才能改变height值实现过渡效果