что не так с этим javascript кодом аккордеона? - PullRequest
Новая
       9

что не так с этим javascript кодом аккордеона?

2 голосов
/ 15 января 2020 

var btn = document.querySelector('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;

for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
      var panel = this.nextElementSibling;
      var otherPanels = document.querySelectorAll("section > div:not(.active)");

      panel.classList.add('.active');
      otherPanels.classList.add('.hidden');

    }
  });

};
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btn {
  color: white;
  background-color: brown;
  cursor: pointer;
}

.panel {
  display: none;
}

.active {
  display: block;
}

.hidden {
  display: none;
}
<body>
  <section id="accordion">
    <h3 class="btn">button1</h3>
    <div class="panel">panel1</div>

    <h3 class="btn">button2</h3>
    <div class="panel">panel2</div>

    <h3 class="btn">button3</h3>
    <div class="panel">panel3</div>

    <h3 class="btn">button4</h3>
    <div class="panel">panel4</div>
  </section>

</body>

Здравствуйте,

Пожалуйста, я пытаюсь написать javascript аккордеон, но мой код не работает

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

, поэтому, когда я нажимаю На кнопке она переключается вверх и вниз

, и отображается только одна панель, затем, когда я нажимаю на другую кнопку, она скользит вниз по собственной панели и автоматически поднимается на другую панель

, пожалуйста, помогите и большое спасибо заранее

Ответы [ 4 ]

1 голос
/ 15 января 2020

Добавление к парням, которые уже упоминали синтаксические ошибки и другие исправления. Вам не нужны циклы, обработки массивов, как в forEach и т. Д., И много прослушивателей событий для каждой кнопки. Вот простое и простое решение с прослушивателем событий в секции: 

let section = document.querySelector('#accordion');

section.addEventListener("click", function(event) {
  if(!event.target.classList.contains('btn')) return;

  let activePanel = section.querySelector('.active');
  let clickedPanel = event.target.nextElementSibling;

  clickedPanel.classList.add('active');
  activePanel && activePanel.classList.remove('active');
});

Нет циклов, только один прослушиватель событий, и вы работаете только с одним текущим элементом и одним ранее активным (если есть)!

Надеюсь, это поможет

1 голос
/ 15 января 2020

Измените код JavaScript на следующий: 

var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;

for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
      var otherPanels = document.querySelectorAll("section > div");
      otherPanels.forEach(function (panel) {
        panel.classList.remove('hidden');
        panel.classList.remove('active');
      });


      var panel = this.nextElementSibling;
      console.log(panel);
      panel.classList.add('active');

      var otherPanels = document.querySelectorAll("section > div:not(.active)");
      otherPanels.forEach(function (panel) {
        panel.classList.add('hidden');
      });
    });
}

Код здесь: https://codepen.io/v08i/pen/RwNBJKN

1 голос
/ 15 января 2020 
var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");

var i;

for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
      var panel = this.nextElementSibling;
      var otherPanels = document.querySelectorAll("section > div.active");
        otherPanels.forEach((item) => {item.classList.remove('active');})
      panel.classList.add('active');


    }
  );

};

Не используйте скрытый класс, поскольку вы уже добавили «display:none» в .panel класс, поэтому вам просто нужно удалить и добавить active class

1 голос
/ 15 января 2020 

var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;

for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
      var panel = this.nextElementSibling;
      if (panel.classList.contains('active')) {
          panel.classList.remove('active');
          panel.classList.add('hidden');
      } else {
          var otherPanels = Array.from(document.querySelectorAll("section > div"));
          otherPanels.forEach(p => p.classList.add('hidden'));
          panel.classList.remove('hidden');
          panel.classList.add('active');
      }
    }
  );
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btn {
  color: white;
  background-color: brown;
  cursor: pointer;
}

.panel {
  display: none;
}

.active {
  display: block;
}

.hidden {
  display: none;
}
<body>
  <section id="accordion">
    <h3 class="btn">button1</h3>
    <div class="panel">panel1</div>

    <h3 class="btn">button2</h3>
    <div class="panel">panel2</div>

    <h3 class="btn">button3</h3>
    <div class="panel">panel3</div>

    <h3 class="btn">button4</h3>
    <div class="panel">panel4</div>
  </section>

</body>
...