关闭对象时，手风琴类无法使用 javascript 正确删除

Question

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

Answer 1

首先，当点击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，您只需要一个活动元素

Answer 2

有一个错字，您没有关闭 HTML 中标题的 div，请检查 sn-p，此外，open 和 close，我添加了一行 JS，首先删除 @ 987654324@ 类（如果存在）然后根据this 切换

请运行 sn-p 看看

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>