删除所有活动的班级，然后切换班级-javascript [英] Remove all class active then toggle class - javascript

问题描述

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

I'm trying to create a simple accordion, I've got the javascript working to toggle the class active on click of the item, but on the HTML i've already got the first item as active.

所以基本上我希望它在您单击其他手风琴头的情况下起作用，打开的一个关闭，然后单击的一个打开。

So basically I want it to work where you click other accordion header, the one that is open closes, and the one you clicked on opens.

我尝试在切换之前使用classList.remove（active），但抛出并出错。

I tried using classList.remove(active) before the toggle but threw and error.

以下是到目前为止我所做操作的链接：

Here is the link to what i've done so far:

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

任何帮助都是很好的。

致谢

推荐答案

看看这行，我很漂亮确保类似的东西应该起作用。

Have a look at this lines, I'm pretty sure something like this should work.

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

这篇关于删除所有活动的班级，然后切换班级-javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！