删除所有活动类然后切换类 - javascript

Question

我正在尝试创建一个简单的手风琴，我已经让 javascript 在单击项目时切换类处于活动状态，但在 HTML 上我已经将第一个项目设为活动状态。

所以基本上我希望它在您单击其他手风琴标题时工作，打开的标题关闭，您单击的标题打开。

我尝试在切换之前使用 classList.remove(active) 但抛出错误。

这是我到目前为止所做的链接：

var accordionLink = document.getElementsByClassName('accordion-item')
    for(var i = 0; i < accordionLink.length; i++) {
        var elem = accordionLink[i];
        elem.addEventListener('click', function(event){
            this.classList.toggle('active');
            event.preventDefault();
        }, false);
    }

https://codepen.io/anishpixellabs/pen/deNbKE

任何帮助都会很棒。

问候

Answer 1

看看这行，我很确定这样的事情应该可以工作。

var accordionLink = document.getElementsByClassName('accordion-item')

for (var i = 0; i < accordionLink.length; i++) {
  var elem = accordionLink[i];
  elem.addEventListener('click', function(event) {
    for (var j = 0; j < accordionLink.length; j++)
      accordionLink[j].classList.remove("active")
    this.classList.add('active');
    event.preventDefault();
  }, false);
}

一些解释：

for (var i = 0; i < accordionLink.length; i++) {     // loop trough all elements to add "onClick event"
  var elem = accordionLink[i];                       // "elem" is current element
  elem.addEventListener('click', function(event) {   // adding "onClick" to current "elem"
    for (var j = 0; j < accordionLink.length; j++)   // ONCLICK trigger: "Loop trough all elements of 'accordionLink'
      accordionLink[j].classList.remove("active")    // remove the 'active class' for every occurrence of 'accordionLink'-class"
    this.classList.add('active');                    // add "active"-class to element that received ONCLICK-trigger
    event.preventDefault();
  }, false);
}