摘要：以前實(shí)習(xí)的時(shí)候因?yàn)橼s時(shí)間直接用的插件做了個(gè)折疊菜單，對(duì)于一個(gè)原生控來(lái)說(shuō)還是更傾向于自己寫一個(gè)，畢竟為了個(gè)折疊菜單引入和有點(diǎn)太臃腫了。原版的效果其實(shí)也不難，主要是在開(kāi)合的過(guò)程中添加了的過(guò)渡效果。

以前實(shí)習(xí)的時(shí)候因?yàn)橼s時(shí)間直接用bootstrap的插件collapse.js做了個(gè)折疊菜單， 對(duì)于一個(gè)原生控來(lái)說(shuō)還是更傾向于自己寫一個(gè)， 畢竟為了個(gè)折疊菜單引入jq和bootstrap有點(diǎn)太臃腫了。 于是又到了考驗(yàn)山寨能力的時(shí)候了-_-# 。
原版collapse.js的效果其實(shí)也不難，主要是在開(kāi)合的過(guò)程中添加了css3的過(guò)渡效果。以下是原版與山寨版demo，同時(shí)點(diǎn)擊預(yù)覽，可明顯感受到加載速度的區(qū)別。
DEMO：
Bootstrap原版Collapse

接下來(lái)是本人山寨版（山寨版結(jié)構(gòu)簡(jiǎn)單，代碼輕巧，無(wú)依賴^_^）：
Collapse by native JS

打包下載出門左轉(zhuǎn)Github ? Collapse By Native JS
以下是代碼邏輯：
HTML的結(jié)構(gòu)

 
      
Title1
       
     

        

             content1
content1
content1
content1
content1
content1
content1
content1
content1

            
       
    

    
 
      
Title2
 
     

       

            content2
content2
content2
content2
content2
content2
content2
content2
content2

            
       
    

    
 
      
Title3
 
     

       

           content3
content3
content3
content3
content3
content3
content3
content3
content3

           
       
    

    
 
      
Title4
 
     

         

          content4
content4
content4
content4
content4
content4
content4
content4
content4

           
       
    

CSS（要山寨就盡量山寨得徹底，外觀樣式全部從bootstrap的樣式搬運(yùn)過(guò)來(lái)）：

* {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
body {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
    margin: 2px;
}

a{
    text-decoration: underline;
    color: #666666;
}
a:hover{
    text-decoration: none;
}
.collapseDiv{
    color: #333;
    border-radius: 4px;
    background-color: #f5f5f5;
    border:1px solid transparent;
    border-color: #ffffd;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    margin-top: 5px;
    margin-bottom: 0;
}
.collapseDiv h3{
    font-size: 14px;
    font-weight: bold;
    color: #333;
    border-color: #ffffd;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 15px;
    background-color: #f5f5f5;
    margin: 0;
}


.collapse_body {
    background-color:#fff ;
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility
    
}
.collapse_content{
    border-top: 1px solid #ffffd;
    background-color:#fff ;
    padding:15px;
}

JS

//接受三個(gè)參數(shù)，分別是折疊菜單的外包div名稱，是否關(guān)閉之前的折疊，默認(rèn)開(kāi)啟的折疊內(nèi)容
        function Collapse(className,close_prev,default_open){        
        this._elements = [];
        this._className = String(className);
        this._previous = Boolean(close_prev)
        this._default = typeof(default_open)==="number" ? default_open: -1
        this.getCurrent  
        this.init();
    }

    //收集所有折疊菜單的div
    Collapse.prototype.collectElementbyClass = function(){
        this._elements = [];
        var allelements = document.getElementsByTagName("div");

        for(var i=0;i