Удалить все активные классы, а затем переключить класс - JavaScript - PullRequest
Новая
       7

Удалить все активные классы, а затем переключить класс - JavaScript

0 голосов
/ 28 апреля 2018

Я пытаюсь создать простой аккордеон, у меня работает javascript, чтобы переключать класс при нажатии элемента, но в HTML у меня уже есть первый активный элемент.

Так что в основном я хочу, чтобы он работал, когда вы нажимаете другой заголовок аккордеона, тот, который открыт, закрывается, а тот, на который вы щелкали, открывается.

Я пытался использовать classList.remove (активный) до переключения, но выкинул и ошибка.

Вот ссылка на то, что я уже сделал: 

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

Любая помощь будет отличной.

Привет

1 Ответ

0 голосов
/ 28 апреля 2018

Посмотрите на эти строки, я уверен, что что-то вроде этого должно работать. 

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