以前实习的时候因为赶时间直接用bootstrap的插件collapse.js做了个折叠菜单， 对于一个原生控来说还是更倾向于自己写一个， 毕竟为了个折叠菜单引入jq和bootstrap有点太臃肿了。 于是又到了考验山寨能力的时候了-_-# 。
原版collapse.js的效果其实也不难，主要是在开合的过程中添加了css3的过渡效果。以下是原版与山寨版demo，同时点击预览，可明显感受到加载速度的区别。
DEMO：
Bootstrap原版Collapse
接下来是本人山寨版（山寨版结构简单，代码轻巧，无依赖^_^）：
Collapse by native JS
打包下载出门左转Github ? Collapse By Native JS
以下是代码逻辑：
HTML的结构
<div class="collapseDiv"> <h3>Title1</h3> <div class="collapse_body"> <div class="collapse_content"> content1<br />content1<br />content1<br />content1<br />content1<br />content1<br />content1<br />content1<br />content1<br /> </div> </div> </div> <div class="collapseDiv"> <h3>Title2</h3> <div class="collapse_body"> <div class="collapse_content"> content2<br />content2<br />content2<br />content2<br />content2<br />content2<br />content2<br />content2<br />content2<br /> </div> </div> </div> <div class="collapseDiv"> <h3>Title3</h3> <div class="collapse_body"> <div class="collapse_content"> content3<br />content3<br />content3<br />content3<br />content3<br />content3<br />content3<br />content3<br />content3<br /> </div> </div> </div> <div class="collapseDiv"> <h3>Title4</h3> <div class="collapse_body"> <div class="collapse_content"> content4<br />content4<br />content4<br />content4<br />content4<br />content4<br />content4<br />content4<br />content4<br /> </div> </div> </div>CSS（要山寨就尽量山寨得彻底，外观样式全部从bootstrap的样式搬运过来）：
* { 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: #ddd; 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: #ddd; 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 #ddd; background-color:#fff ; padding:15px;}JS
//接受三个参数，分别是折叠菜单的外包div名称，是否关闭之前的折叠，默认开启的折叠内容 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<allelements.length;i++){ var collapse_div = allelements[i]; if (typeof collapse_div.className === "string" && collapse_div.className === this._className){ var h3s = collapse_div.getElementsByTagName("h3"); var collapse_body = collapse_div.getElementsByClassName("collapse_body"); if(h3s.length === 1 && collapse_body.length === 1){ h3s[0].style.cursor = "pointer"; if(this._default === this._elements.length){ collapse_body[0].style.visibility = "visible"; collapse_body[0].style.height = collapse_body[0].scrollHeight+"px" }else{ collapse_body[0].style.height = "0px"; collapse_body[0].style.visibility = "hidden"; } this._elements[this._elements.length] = collapse_div; } } } } Collapse.prototype.open = function(elm){ elm.style.visibility = "visible"; elm.style.height = elm.scrollHeight + "px" } Collapse.prototype.close = function(elm){ elm.style.height = "0px"; elm.style.visibility = "hidden"; } Collapse.prototype.isOpen = function(elm){ return elm.style.visibility === "visible" } Collapse.prototype.getCurrent = function(header){ var cur ; if(window.addEventListener){ cur = header.parentNode }else{ cur = header.parentElement } return cur.getElementsByClassName("collapse_body")[0] } Collapse.prototype.toggleDisplay = function(header){ var cur = this.getCurrent(header) //console.log(cur) if(this.isOpen(cur)){ this.close(cur); }else{ this.open(cur); } if(this._previous){ for(var i=0;i<this._elements.length;i++){ if(this._elements[i] !== (cur.parentNode||cur.parentElement)){ var collapse_body = this._elements[i].getElementsByClassName("collapse_body"); collapse_body[0].style.height = "0px"; collapse_body[0].style.visibility = "hidden"; } } } } Collapse.prototype.init = function(){ var instance = this; this.collectElementbyClass(); if(this._elements.length === 0){ return; } for(var i=0;i<this._elements.length;i++){ var h3s = this._elements[i].getElementsByTagName("h3"); if(window.addEventListener){ h3s[0].addEventListener("click",function(){ instance.toggleDisplay(this);},false); }else{ h3s[0].onclick = function(){instance.toggleDisplay(this);} } } } //传参 var myCollapse = new Collapse("collapseDiv",true); 联系客服
