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

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

接下來是本人山寨版（山寨版結(jié)構(gòu)簡單，代碼輕巧，無依賴^_^）：
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)過來）：

* {
    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

//接受三個參數(shù)，分別是折疊菜單的外包div名稱，是否關(guān)閉之前的折疊，默認(rèn)開啟的折疊內(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