bootstrap之collapse

最新推荐文章于 2023-10-17 17:29:04 发布
最新推荐文章于 2023-10-17 17:29:04 发布
阅读量690 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013055396/article/details/78520275
版权

一、前言

这节介绍下collapse(手风琴)模块的源码实现。

二、源码

 /* ========================================================================
  * Bootstrap: collapse.js v3.3.7(折叠/手风琴)
  * http://getbootstrap.com/javascript/#collapse
  * ========================================================================
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */

 /* jshint latedef: false */

 +function ($) {
   'use strict';

   // COLLAPSE PUBLIC CLASS DEFINITION
   // ================================
   var Collapse = function (element, options) {
     this.$element      = $(element)
     this.options       = $.extend({}, Collapse.DEFAULTS, options)
     this.$trigger      = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
                            '[data-toggle="collapse"][data-target="#' + element.id + '"]')
     // 变量：是否正在过渡动画中
     this.transitioning = null

     if (this.options.parent) {
       this.$parent = this.getParent()
     } else {
       this.addAriaAndCollapsedClass(this.$element, this.$trigger)
     }

     if (this.options.toggle) this.toggle()
   }

   Collapse.VERSION  = '3.3.7'

   Collapse.TRANSITION_DURATION = 350

   Collapse.DEFAULTS = {
     toggle: true
   }

   // 高度还是宽度发生改变
   Collapse.prototype.dimension = function () {
     var hasWidth = this.$element.hasClass('width')
     return hasWidth ? 'width' : 'height'
   }

   // 显示
   Collapse.prototype.show = function () {
     // 如果正在动画过渡中，或者已经显示，那么直接返回不做任何处理
     if (this.transitioning || this.$element.hasClass('in')) return

     var activesData
     // 展开或者正在展开的手风琴控制面板
     var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')

     // 如果手风琴控制面板正在过渡中，则不作任何处理(这里只考虑actives.length为1的处理，即控制面板只有单个展开的情况)
     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')
       // 存在一种情况：如果一开始有控制面板展开，这时候点击其他面板，展开的面板会被触发隐藏同时初始化bs.collapse对象('hide'参数)存储到
       // data中，下次点击最开始展开的面板时，这时候会从data中读取bs.collapse作为对象而不是重新初始化，然后触发toggle，但是因为并没有将
       // parent传到option中，所以后面点击的面板并不会收拢；这里做的处理是将所有已经展开的面板都隐藏，而且清除掉存在data的bs.collapse数
       // 据，下次点击重新初始化
       // 不过其实将对象存在data的bs.collapse属性中还是有必要的，如果多次点击同一面板触发器，可以避免多次初始化对象
       activesData || actives.data('bs.collapse', null)
     }

     var dimension = this.dimension()

     // 目标元素移除collapse类，添加collapsing，设置height为0
     this.$element
       .removeClass('collapse')
       .addClass('collapsing')[dimension](0)
       .attr('aria-expanded', true)

     // 触发元素移除collapsed类
     this.$trigger
       .removeClass('collapsed')
       .attr('aria-expanded', true)

     this.transitioning = 1

     var complete = function () {
       // 目标元素移除collapsing类，添加.collapse .in类，并重置height
       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('-'))

     // 设置函数动画结束监听函数，并设置height为目标元素的scrollHeight
     this.$element
       .one('bsTransitionEnd', $.proxy(complete, this))
       .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
   }

   // 隐藏
   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()

     // 强制回流，为页面重绘做准备
     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.prototype.toggle = function () {
     this[this.$element.hasClass('in') ? 'hide' : 'show']()
   }

   // 找到手风琴目标元素并为所有拓展面板执行addAriaAndCollapsedClass方法
   Collapse.prototype.getParent = function () {
     return $(this.options.parent)
       .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
       .each($.proxy(function (i, element) {
         var $element = $(element)
         this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
       }, this))
       .end()
   }

   // 添加无障碍阅读属性和collapsed类
   Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
     var isOpen = $element.hasClass('in')

     $element.attr('aria-expanded', isOpen)
     $trigger
       .toggleClass('collapsed', !isOpen)
       .attr('aria-expanded', isOpen)
   }

   // 获取目标元素
   function getTargetFromTrigger($trigger) {
     var href
     var target = $trigger.attr('data-target')
       || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7

     return $(target)
   }

   // COLLAPSE PLUGIN DEFINITION
   // ==========================
   function Plugin(option) {
     return this.each(function () {
       var $this   = $(this)
       var data    = $this.data('bs.collapse')
       var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)

       // 如果直接用JS触发手风琴，而且option为show/hide字符串，那么没有不调用toggle方法，而直接调用相应hide/show方法
       if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
       if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
       if (typeof option == 'string') data[option]()
     })
   }

   var old = $.fn.collapse

   $.fn.collapse             = Plugin
   $.fn.collapse.Constructor = Collapse


   // COLLAPSE NO CONFLICT
   // ====================
   $.fn.collapse.noConflict = function () {
     $.fn.collapse = old
     return this
   }


   // COLLAPSE DATA-API
   // =================
   $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
     var $this   = $(this)

     if (!$this.attr('data-target')) e.preventDefault()

     var $target = getTargetFromTrigger($this)
     // 如果已经初始化了bs.collapse属性对应的对象，那么直接触发toggle方法(即除了第一次点击初始化之外)
     var data    = $target.data('bs.collapse')
     var option  = data ? 'toggle' : $this.data()

     Plugin.call($target, option)
   })

 }(jQuery);

三、应用 & 源码分析

1、应用
 <div class="panel-group" id="accordion">
   <div class="panel panel-default">
     <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion"
            href="#collapseOne">
           点击我进行展开，再次点击我进行折叠。第 1 部分
         </a>
       </h4>
     </div>
     <div id="collapseOne" class="panel-collapse collapse in">
       <div class="panel-body">
         Nihil anim keffiyeh helvetica, craft beer labore wes anderson
         cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
         vice lomo.
       </div>
     </div>
   </div>
   <div class="panel panel-default">
     <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion"
            href="#collapseTwo">
           点击我进行展开，再次点击我进行折叠。第 2 部分
         </a>
       </h4>
     </div>
     <div id="collapseTwo" class="panel-collapse collapse">
       <div class="panel-body">
         Nihil anim keffiyeh helvetica, craft beer labore wes anderson
         cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
         vice lomo.
       </div>
     </div>
   </div>
   <div class="panel panel-default">
     <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion"
            href="#collapseThree">
           点击我进行展开，再次点击我进行折叠。第 3 部分
         </a>
       </h4>
     </div>
     <div id="collapseThree" class="panel-collapse collapse">
       <div class="panel-body">
         Nihil anim keffiyeh helvetica, craft beer labore wes anderson
         cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
         vice lomo.
       </div>
     </div>
   </div>
 </div>

 <script>
   $(function () { $('#collapseFour').collapse({
     toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
 </script>
2、源码分析

1、data-parent
如果元素具有相同的 data-parent 属性，那么可以具有点击一个折叠面板，其他所有展开的面板均折叠
2、show
开始时每个面板均添加 collapse 类(display:none)，动画准备时移除 collapse 并添加 collapsing 类(height:0;overflow:hidden;)，
动画执行时 collapsing 移除添加 .collapse.in(display: block;) 并清空行内 height 达到过渡打开面板的效果

青松008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap之折叠（Collapse）
qq_47043261的博客
07-28 1974
关于折叠的简单用法我在代码的注释里了写的比较清楚了，想要学习这个组件的小伙伴自己看吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折叠</title> <!-- 需要引入的样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&gt
5.11 Bootstrap 折叠(Collapse)插件
梁辰兴的博客
07-24 1002
通过 data 属性：向元素添加 data-toggle=“collapse” 和 data-target，自动分配可折叠元素的控制。注意：如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的bootstrap.min.js。正如您在实例中看到的，我们创建了一个可折叠的组件，与折叠面板（accordion）不同，我们没有添加属性 data-parent。'嘿，当您展开时会提示本警告'
Bootstrap-collapse
qq_43008667的博客
02-17 389
使用方法参考：https://www.cnblogs.com/zhangbao/p/6566084.html 注意： collapse的执行对象 插件标识：data-toggle="collapse"表示该元素是collapse插件 目标标识： herf（非button checkbox等需要click事件的元素） data-target（需要click事件反应的元素） 如： <input class="checkbox-square" type="checkbox" id="module-c
bootstrap-collapse.js
12-13
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
Bootstrap系列之折叠（Collapse）
老__L的博客
06-05 7505
折叠（Collapse）
Bootstrap学习笔记 18 - Collapse
Cynhard的专栏
12-01 710
Collapse实现Collapse 在某个元素（比如<div>）加上 .collapse 类，该元素用来显示折叠的内容 为了控制折叠内容的显示与隐藏，需要增加另外一个元素（ <a> 或者 <button>），并且加上 data-toggle="collapse" 类 为了将折叠元素与控制折叠的元素关联起来，需要在折叠元素上加上 id=xxx 并且在控制折叠的元素上加上 data-target=#x
记录：前端框架Bootstrap学习使用之组件——Collapse（折叠）
lky_for_lucky的博客
11-24 3826
Collapse作用： 折叠，如左侧各级菜单栏折叠。 Collapse工作原理： 将元素的高度变为0（感兴趣的可以去看源码） Collapse使用： class="collapse" 将要折叠的内容声明为collapse类 通过按钮控制折叠（非按钮如链接a可以声明role="button"） Collapse选项：（处于按钮中） data-bs-toggle="collapse" （绑定collapse事件） data-bs-target="#target" （折叠的目标，可用
Bootstrap 折叠（Collapse）插件用法实例详解
09-02
主要介绍了Bootstrap 折叠（Collapse）插件用法实例详解的相关资料,需要的朋友可以参考下
全面解析Bootstrap中nav、collapse的使用方法
09-02
主要为大家详细解析了Bootstrap中nav、collapse的使用方法，感兴趣的朋友可以参考一下
Bootstrap 折叠（Collapse）插件
01-19
Bootstrap 折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 如果您想要单独引用该插件的功能，那么您需要引用 collapse....
Bootstrap每天必学之折叠（Collapse）插件
09-02
Bootstrap每天必学之折叠（Collapse）插件，折叠插件可以很容易地让页面区域折叠起来，感兴趣的小伙伴们可以参考一下
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
08-31
今天做的项目，用到了bootstrap的折叠功能，这个功能需要只展开一个折叠框，点击一个就会自动隐藏另一个，实现起来也很容易，但是在测试时同事提出了一个bug，怎么解决呢？今天小编通过本教程给大家分享下
Bootstrap(四十四)
shi199434的博客
12-15 237
Bootstrap 折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用Transition（过渡）插件。或者，正如 Bootstrap 插件概览 一章中所提到，
浅谈bootstrap前端框架
iteye_15598的博客
03-28 219
    现如今web前端的不断更新，在web前端开发也出现了我们开发人员比较喜欢的框架，框架的主要作用就是给开发人员带来方便，同时使得开发之后十分容易维护，这里主要讲的是bootstrap这个框架，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。如果要快速简单的学习的话可以考虑去菜鸟教...
Bootstrap Collapse的使用
最新发布
sxj的专栏
10-17 1030
（1）data-parent=“#accordion”：它指定的当前折叠框是在哪个下边，就是类似于分组，是指的在哪个分组下，该分组指定了ID（<div class=“panel-group” id=“accordion” ），只需要将这3个划分到同一个分组下，那么点击其中一个展开，另外两个才会折叠。其中最关键的是：data-parent=“#accordion”、aria-expanded=“true”、class=“panel-collapse collapse in”
Bootstrap简单认识之Collapse组件
热门推荐
博客
03-02 1万+
Collapse（内容折叠）组件一、简介此组件可以将一篇区域收起、展开，类似折叠的效果。主要用于内容过多时，将部分内容折叠。二、样式 分析了这几个组件，发现Bootstrap喜欢将transition的持续时间设置为600ms 这个组件并没有什么特殊的样式，一共就几个： .collapse { display: none; &.show { display: block; }
Bootstrap插件collapse源码的学习
learninginJAVA的专栏
10-24 2449
使用说明 手风琴插件可以分为两部分：可点击的标题区，和展现的内容区 标题区，需要定义data-toggle="collapse"和data-parent="#example"（即包含他们的容器），还有data-target或href指向的内容区内容区，需要id或class与标题区定义的一致。添加"collapse"类来默认隐藏该内容区。如果需要在一开始就显示就添加"collapse i
Bootstrap JavaScript插件：折叠内容插件 (collapse.js)
WangMin@汪末末
09-10 2463
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 折叠插件（collapse.js）可以很容易地让页面区域折叠起来。当列表菜单的条目特别多，而页面空间有限时，使用类似于手风琴的折叠菜单可以节约页面空间，方便用户浏览。 实例 .collapse 隐藏内容 .collapsing 在转换期间应用 .collapse.in显示内容 可以使用带有href属性的链接，或具有数据目标属性的按钮。在这两种情况下，都需要data-toggle=“collap
JQ如何去掉bootstrap的collapse的展开效果
04-22
您好，关于您的问题，可以通过以下两种方式去掉Bootstrap的Collapse的展开效果： 1.在您的 HTML 代码中，找到使用了 Collapse 组件的 HTML 元素，例如： ``` <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 展开/折叠 </button> <div class="collapse" id="collapseExample"> <div class="card card-body"> 一些折叠内容 </div> </div> ``` 在 data-toggle 属性和 data-target 属性的值中分别去掉 "collapse" 即可： ``` <button class="btn btn-primary" type="button" data-toggle="" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 展开/折叠 </button> <div class="" id="collapseExample"> <div class="card card-body"> 一些折叠内容 </div> </div> ``` 2.通过使用自定义 CSS 样式来去掉 Collapse 组件的展开效果，例如： ``` /* 去掉 Collapse 组件的展开效果 */ .collapse:not(.show) { visibility: hidden; height: 0; transition: visibility 0s, height 0s; } ``` 希望这些答案可以解决您的问题。如果您还有其他问题，可以随时向我提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值