Template:BIT-China/js/collapse2

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";

   // 控制右侧圆点导航栏文字变色 需要延迟处理，因为会和折叠板收回的函数有冲突
   setTimeout(function () {
       var nav_dot_font_id = "nav-dot-" + (elm.parentElement.id || elm.parentNode.id);
       var nav_dot_font = document.getElementById(nav_dot_font_id);
       nav_dot_font.classList.add("nav-dot-selected");

       // 控制右侧圆点导航栏圆圈变色
       var nav_dot_box_id = "nav-dot-box-" + (elm.parentElement.id || elm.parentNode.id);
       var nav_dot_box = document.getElementById(nav_dot_box_id);
       nav_dot_box.classList.add("nav-dot-box-color");
   }, 50);

   // 控制右侧圆点导航栏card显示
   setTimeout(function () {
       var nav_dot_card_id = "nav-dot-card-" + (elm.parentElement.id || elm.parentNode.id);
       var nav_dot_card = document.getElementById(nav_dot_card_id);
       nav_dot_card.className = "nav-dot-card-hover";
   }, 80);

   // 圆点展开
   var coll_circle_expend = (elm.parentElement || elm.parentNode).getElementsByClassName("collapseCircle");
   coll_circle_expend[0].style.height = 16 + elm.scrollHeight + "px";
   coll_circle_expend[0].style.transition = ".4s";

} Collapse.prototype.close = function (elm) {

   elm.style.height = "0px";
   elm.style.visibility = "hidden";

   // 控制右侧圆点导航栏文字变色 需要延迟处理，因为会和折叠板收回的函数有冲突
   setTimeout(function () {
       var nav_dot_font_id = "nav-dot-" + (elm.parentElement.id || elm.parentNode.id);
       var nav_dot_font = document.getElementById(nav_dot_font_id);
       nav_dot_font.classList.remove("nav-dot-selected");

       // 控制右侧圆点导航栏圆圈变色
       var nav_dot_box_id = "nav-dot-box-" + (elm.parentElement.id || elm.parentNode.id);
       var nav_dot_box = document.getElementById(nav_dot_box_id);
       nav_dot_box.classList.remove("nav-dot-box-color");
   }, 50);

   // 控制右侧圆点导航栏card显示
   setTimeout(function () {
       var nav_dot_card_id = "nav-dot-card-" + (elm.parentElement.id || elm.parentNode.id);
       var nav_dot_card = document.getElementById(nav_dot_card_id);
       nav_dot_card.className = "nav-dot-card";
   }, 80);

   // 圆点收起
   var coll_circle_fold = (elm.parentElement || elm.parentNode).getElementsByClassName("collapseCircle");
   coll_circle_fold[0].style.height = "16px";

} 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";

               // 圆点遍历收起
               var coll_circle_up = this._elements[i].getElementsByClassName("collapseCircle");
               coll_circle_up[0].style.height = "16px";

               // 控制右侧圆点导航栏文字变色
               var nav_dot_font_id = "nav-dot-" + this._elements[i].id;
               var nav_dot_font = document.getElementById(nav_dot_font_id);
               nav_dot_font.classList.remove("nav-dot-selected");

               // 控制右侧圆点导航栏圆圈变色
               var nav_dot_box_id = "nav-dot-box-" + this._elements[i].id;
               var nav_dot_box = document.getElementById(nav_dot_box_id);
               nav_dot_box.classList.remove("nav-dot-box-color");

               // 控制右侧圆点导航栏card显示
               var nav_dot_card_id = "nav-dot-card-" + this._elements[i].id;
               var nav_dot_card = document.getElementById(nav_dot_card_id);
               nav_dot_card.className = "nav-dot-card";
           }
       }
   }

}

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", false);