这次说的是手风琴组件，但是bootstrap的实现有点奇怪，CSS中的类名以accordion为前缀，JS里面的处理组件与相关方法为collapse。

HTML结构以下：类名accordion的DIV包含N个类名为accordion-group的DIV，每组又分两部分accordion-heading与accordion-body。accordion-heading包含触发用的accordion-toggle，accordion-body里的accordion-inner才是用于放内容的。

    
            
     
              
      
                
                         国土问题                              
      
              
      
                
       
        		  前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。                
       
              
      
            
     
            
     
              
      
                
                         门票问题                              
      
              
      
                
       
        		  目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。                
       
              
      
            
     
            
     
              
      
                
                         超生罚款                              
      
              
      
                
       
        		  学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。                
       
              
      
            
     
          
    

与其他组件一样，只要引用它就能使用了。但绑定回调时，要绑定.accordion-body之上。感觉bootstrap的官方教程做得不太好，没有统一要绑定事件的类名，让人一看就知道绑在那里。不过要用户写HTML感觉不太好。

!function ($) {    "use strict"; // jshint ;_;    /* COLLAPSE PUBLIC CLASS DEFINITION  * ================================ */    var Collapse = function (element, options) {        this.$element = $(element)//对应 accordion-body        this.options = $.extend({}, $.fn.collapse.defaults, options)        if (this.options.parent) {            this.$parent = $(this.options.parent)        }        this.options.toggle && this.toggle()    }    Collapse.prototype = {        constructor: Collapse        ,        dimension: function () {            var hasWidth = this.$element.hasClass('width')            return hasWidth ? 'width' : 'height'        }        ,        show: function () {            var dimension            , scroll            , actives            , hasData            if (this.transitioning) return            dimension = this.dimension()            //如果没有指明width类名            scroll = $.camelCase(['scroll', dimension].join('-'))//求得scrollWidth 或scrollHeight            //找到这个手风琴组件的所有展开的面板            actives = this.$parent && this.$parent.find('> .accordion-group > .in')            //然后合上它们            if (actives && actives.length) {                hasData = actives.data('collapse')                if (hasData && hasData.transitioning) return                actives.collapse('hide')//合上它们,并削去它们的实例                hasData || actives.data('collapse', null)            }            //让当前面板的高度或宽度为零            this.$element[dimension](0)            //开始动画与触发事件            this.transition('addClass', $.Event('show'), 'shown')            $.support.transition && this.$element[dimension](this.$element[0][scroll])        }        ,        hide: function () {            var dimension            if (this.transitioning) return            dimension = this.dimension()            this.reset(this.$element[dimension]())            this.transition('removeClass', $.Event('hide'), 'hidden')            this.$element[dimension](0)        }        ,        reset: function (size) {            var dimension = this.dimension()            this.$element            .removeClass('collapse')            [dimension](size || 'auto')//还原为原来的大小            [0].offsetWidth            this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')            return this        }        ,        transition: function (method, startEvent, completeEvent) {            var that = this            , complete = function () {                if (startEvent.type == 'show') that.reset()                that.transitioning = 0                that.$element.trigger(completeEvent)            }            this.$element.trigger(startEvent)            if (startEvent.isDefaultPrevented()) return            this.transitioning = 1            //添加或移除类名in            this.$element[method]('in')            $.support.transition && this.$element.hasClass('collapse') ?            this.$element.one($.support.transition.end, complete) :            complete()        }        ,        toggle: function () {//最重要的方法            this[this.$element.hasClass('in') ? 'hide' : 'show']()        }    }    /* COLLAPSE PLUGIN DEFINITION  * ========================== */    var old = $.fn.collapse    $.fn.collapse = function (option) {        return this.each(function () {            var $this = $(this)            , data = $this.data('collapse')            , options = typeof option == 'object' && option            if (!data) $this.data('collapse', (data = new Collapse(this, options)))            if (typeof option == 'string') data[option]()        })    }    $.fn.collapse.defaults = {        toggle: true    }    $.fn.collapse.Constructor = Collapse    /* COLLAPSE NO CONFLICT  * ==================== */    $.fn.collapse.noConflict = function () {        $.fn.collapse = old        return this    }    /* COLLAPSE DATA-API  * ================= */    $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {        var $this = $(this), href        , target = $this.attr('data-target') //取得它要展开或折叠的区域,1通过'data-target'        || e.preventDefault() //2通过href        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7        , option = $(target).data('collapse') ? 'toggle' : $this.data()        $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')//?在CSS中没有看到此类名        $(target).collapse(option)//初始化手风琴 bootstrap有个特点,都是点击时才开始初始化组件    })}(window.jQuery);

<!DOCTYPE html> <html> <head> <title>bootstrap学习 by 司徒正美</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/> <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-collapse.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-button.js"></script> <script> $(function () { var log = function(s){ window.console && console.log(s) } $(".accordion-body").on("show", function(){ log("show") }).on("shown", function(){ log("shown") }).on("hide", function(){ log("hide") }).on("hidden", function(){ log("hidden") }) }) </script> </head> <body> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 国土问题 </a> </div> <div id="collapseOne" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> 前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。 </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 门票问题 </a> </div> <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> 目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。 </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 超生罚款 </a> </div> <div id="collapseThree" class="accordion-body in" style="height: auto;"> <div class="accordion-inner"> 学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。 </div> </div> </div> </div> </body> </html>

运行代码

引入的less文件为accordion.less

bootstrap的手风琴只能以垂直形式出现。