物件關閉時，手風琴類無法使用javascript正確洗掉

用 javascript 不是最好的，我目前被困在某事上。我設法將一個手風琴放在一起，它可以通過一個 :after 圖示展開和折疊，該圖示在打開物件時會發生變化。它還只允許在需要時打開一個手風琴。

我的問題是 :after 圖示無法正常運行，因為一旦添加了“活動”類，它只會在打開另一個物件時被洗掉，而不會在關閉同一個物件時被洗掉。有沒有人有可以解決這個問題的解決方案？如果打開另一個手風琴，以及如果再次單擊物件以關閉它，我需要洗掉該類。

如上所述，我不是最擅長使用 JS 的，而且我真的只是從我在這里找到的其他答案中實作了我使用這個手風琴所做的。這是我當前的代碼。任何幫助是極大的贊賞！

Javascript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i  ) {
acc[i].addEventListener("click", function() {

var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  let active = document.querySelectorAll(".accordion-div .accordion.active");
  for(let j = 0; j < active.length; j  ){
    active[j].classList.remove("active");
    active[j].nextElementSibling.style.maxHeight = null;
  }
  this.classList.toggle("active");
  panel.style.maxHeight = panel.scrollHeight   "px";
}
});
}

HTML

<div class="accordion-div">
<h5 class="accordion">Heading</h5>
<div class="panel">
<p>Some Text</p>
<h5 class="accordion">Heading 2</h5>
<div class="panel">
<p>Some Text</p>
<h5 class="accordion">Heading 3</h5>
<div class="panel">
<p>Some Text</p>
</div>
</div>

CSS

h5.accordion {
  cursor: pointer;
  padding: 25px!important;
  padding-left:2px!important;
  width: 100%;
  line-height:13px;
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-size:13px!important;
  vertical-align:center;
  font-family:"Avenir Next", sans-serif;
  font-weight:300;
  margin:0;
  margin-top:2px;
  border-bottom:0!important;
}

h5.accordion:after {
  content: '\002B';
  line-height:13px;
  font-size:22px;
  float: right;
  color:#5f5f5f;
  margin-left: 5px;
  transition: transform .5s;
  transform-origin: 50% 60%;
}

.active:after {
  transform: rotate(-225deg);
}

.panel {
  padding: 0 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-bottom:solid 1px #f1f1f1;
}

uj5u.com熱心網友回復：

有一個拼寫錯誤，您沒有關閉 HTML 中標題的 div，請檢查代碼段，另外還有open和close，我添加了一行JS以首先洗掉active該類（如果存在），然后根據this

請運行代碼片段并查看

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i  ) {
acc[i].addEventListener("click", function() {
this.classList.remove("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  let active = document.querySelectorAll(".accordion-div .accordion.active");
  for(let j = 0; j < active.length; j  ){
    active[j].classList.remove("active");
    active[j].nextElementSibling.style.maxHeight = null;
  }
  this.classList.toggle("active");
  panel.style.maxHeight = panel.scrollHeight   "px";
}
});
}

h5.accordion {
  cursor: pointer;
  padding: 25px!important;
  padding-left:2px!important;
  width: 100%;
  line-height:13px;
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-size:13px!important;
  vertical-align:center;
  font-family:"Avenir Next", sans-serif;
  font-weight:300;
  margin:0;
  margin-top:2px;
  border-bottom:0!important;
}

h5.accordion:after {
  content: '\002B';
  line-height:13px;
  font-size:22px;
  float: right;
  color:#5f5f5f;
  margin-left: 5px;
  transition: transform .5s;
  transform-origin: 50% 60%;
}

.active:after {
  transform: rotate(-225deg);
}

.panel {
  padding: 0 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-bottom:solid 1px #f1f1f1;
}
javascript
jquery

<div class="accordion-div">
<h5 class="accordion">Heading</h5>
<div class="panel">
<p>Some Text</p>
</div>
<h5 class="accordion">Heading 2</h5>
<div class="panel">
<p>Some Text</p>
</div>
<h5 class="accordion">Heading 3</h5>
<div class="panel">
<p>Some Text</p>
</div>
</div>

uj5u.com熱心網友回復：

首先，當標簽被點擊時洗掉所有活動類h5

const removeActiveClasses = (e) => {
    const target = e.targrt || e.currentTarget;
    const active = target.querySelector(".accordion.active");
    active.classList.remove("active");
}

然后需要激活當前元素

const activeElement = (e) => {
    const target = e.target.nextElementSibling;
    target.classList.add("active");
}

在末尾

const accordion = e => {
    removeActiveClasses(e);
    activeElement(e);
}

for (i = 0; i < acc.length; i  ) {
    acc[i].addEventListener("click", accordion);
}

注意：您不需要使用回圈，because您只需要一個活動元素

標籤：javascript 查询 手风琴

上一篇：基于選中的復選框的jquery簡單隱藏顯示

下一篇：在操作變數值的情況下如何使用多重繼承