Javascript改進折疊元素

我已經創建了這個運行良好的切換腳本，但我需要改進它，以便onclick，任何以前折疊（即打開）的子貓將同時關閉，并且只有單擊的那個應該折疊（即打開）。

var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i  ) {
  collapse[i].addEventListener("click", function() {
    this.classList.toggle("activeCollapse");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight   "px";
    }
  });
}

.catColumn {
  width: 400px;
  margin: 0 auto;
}

.collapsible {
  width: 100%;
  padding: 14px 8px;
  margin-top: 10px;
  color: #5a2e0f;
  background-color: #fff;
  border: 1px solid #c1bfbf;
  outline: none;
  border-radius: 6px;
}

.collapsible:hover {
  background-color: #efdac6;
}

.collapsible:after {
  float: right;
  content: '\002B';
  color: #5a2e0f;
  font-size: 1.8em;
  margin-left: 5px;
  cursor: pointer;
  line-height: 26px;
}

.activeCollapse {
  background-color: #efdac6;
  border-radius: 0;
  border-bottom: 0px;
}

.activeCollapse:after {
  content: "\2212";
}


/**/

ul.subcats {
  width: 100%;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  font-size: 13px;
}

ul.subcats li {
  padding: 12px;
}

<div class="catColumn">
  <div class="collapsible">cat1</div>
  <ul class="subcats">
    <li>subcat1</li>
    <li>subcat2</li>
  </ul>
  <div class="collapsible">cat2</div>
  <ul class="subcats">
    <li>subcat3</li>
    <li>subcat4</li>
  </ul>
</div>

uj5u.com熱心網友回復：

   var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i  ) {
  collapse[i].addEventListener("click", function() {
    this.classList.toggle("activeCollapse");
for (j = 0; j < collapse.length; j  ) {
    this.classList.remove("activeCollapse");
    if(j!=i)
    collapse[j].nextElementSibling.style.maxHeight = null;
    var content = this.nextElementSibling;
  }
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight   "px";
    }
  });
}

    .catColumn {
  width: 400px;
  margin: 0 auto;
}

.collapsible {
  width: 100%;
  padding: 14px 8px;
  margin-top: 10px;
  color: #5a2e0f;
  background-color: #fff;
  border: 1px solid #c1bfbf;
  outline: none;
  border-radius: 6px;
}

.collapsible:hover {
  background-color: #efdac6;
}

.collapsible:after {
  float: right;
  content: '\002B';
  color: #5a2e0f;
  font-size: 1.8em;
  margin-left: 5px;
  cursor: pointer;
  line-height: 26px;
}

.activeCollapse {
  background-color: #efdac6;
  border-radius: 0;
  border-bottom: 0px;
}

.activeCollapse:after {
  content: "\2212";
}


/**/

ul.subcats {
  width: 100%;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  font-size: 13px;
}

ul.subcats li {
  padding: 12px;
}

 <div class="catColumn">
        <div class="collapsible">cat1</div>
        <ul class="subcats">
          <li>subcat1</li>
          <li>subcat2</li>
        </ul>
        <div class="collapsible">cat2</div>
        <ul class="subcats">
          <li>subcat3</li>
          <li>subcat4</li>
        </ul>
      </div>

uj5u.com熱心網友回復：

首先，遍歷打開的元素并洗掉類并將最大高度設定為空。然后做你的正常代碼。

我還更改了您的事件偵聽器，因此每個元素只有一個而不是一個。

var collapse = document.querySelector(".catColumn");

collapse.addEventListener("click",function(e){
   let el = e.target;
   if(el.className.indexOf("collapsible") > -1){
     let shown = document.querySelectorAll(".activeCollapse");
     shown.forEach(function(activeEl){
      activeEl.classList.remove("activeCollapse");
      activeEl.nextElementSibling.style.maxHeight = null;
     });
     
    el.classList.toggle("activeCollapse");
    var content = el.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight   "px";
    }
     
    
   }
});

.catColumn {
  width: 400px;
  margin: 0 auto;
}

.collapsible {
  width: 100%;
  padding: 14px 8px;
  margin-top: 10px;
  color: #5a2e0f;
  background-color: #fff;
  border: 1px solid #c1bfbf;
  outline: none;
  border-radius: 6px;
}

.collapsible:hover {
  background-color: #efdac6;
}

.collapsible:after {
  float: right;
  content: '\002B';
  color: #5a2e0f;
  font-size: 1.8em;
  margin-left: 5px;
  cursor: pointer;
  line-height: 26px;
}

.activeCollapse {
  background-color: #efdac6;
  border-radius: 0;
  border-bottom: 0px;
}

.activeCollapse:after {
  content: "\2212";
}


/**/

ul.subcats {
  width: 100%;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  font-size: 13px;
}

ul.subcats li {
  padding: 12px;
}

<div class="catColumn">
  <div class="collapsible">cat1</div>
  <ul class="subcats">
    <li>subcat1</li>
    <li>subcat2</li>
  </ul>
  <div class="collapsible">cat2</div>
  <ul class="subcats">
    <li>subcat3</li>
    <li>subcat4</li>
  </ul>
</div>

uj5u.com熱心網友回復：

var parentDiv = document.getElementsByClassName("catColumn")[0];
parentDiv.addEventListener("click",function(e){
let current= e.target;

var collapse = document.getElementsByClassName("collapsible");
let toExpand = !current.nextElementSibling.style.maxHeight ;
for (let i = 0; i < collapse.length; i  ) {          
    var content = collapse[i].nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      collapse[i].classList.toggle("activeCollapse");
    }
  }
  let toToggle = current.nextElementSibling;
   if(toExpand ){
    toToggle.style.maxHeight = content.scrollHeight   "px";
     current.classList.toggle("activeCollapse");
    }
  
});

.catColumn {
  width: 400px;
  margin: 0 auto;
}

.collapsible {
  width: 100%;
  padding: 14px 8px;
  margin-top: 10px;
  color: #5a2e0f;
  background-color: #fff;
  border: 1px solid #c1bfbf;
  outline: none;
  border-radius: 6px;
}

.collapsible:hover {
  background-color: #efdac6;
}

.collapsible:after {
  float: right;
  content: '\002B';
  color: #5a2e0f;
  font-size: 1.8em;
  margin-left: 5px;
  cursor: pointer;
  line-height: 26px;
}

.activeCollapse {
  background-color: #efdac6;
  border-radius: 0;
  border-bottom: 0px;
}

.activeCollapse:after {
  content: "\2212";
}


/**/

ul.subcats {
  width: 100%;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  font-size: 13px;
}

ul.subcats li {
  padding: 12px;
}

<div class="catColumn">
  <div class="collapsible">cat1</div>
  <ul class="subcats">
    <li>subcat1</li>
    <li>subcat2</li>
  </ul>
  <div class="collapsible">cat2</div>
  <ul class="subcats">
    <li>subcat3</li>
    <li>subcat4</li>
  </ul>
</div>

標籤：javascript html css

上一篇：如何將[x:x1,y:y1]陣列轉換為數字陣列，其中數字存盤在javascript中，如[x1,y1,x2,y2....]？

下一篇：制作具有10x10單元格的表格，每個單元格的內部編號從1到100