这个 javascript 手风琴代码有什么问题？

Question

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 手风琴代码，但我的代码不起作用

我想做的是当我点击按钮时，它只显示它的面板，只添加活动 class 到这个面板，同时添加隐藏的 class 到所有其他面板

所以当我点击按钮时它会上下滑动

只有一个面板显示，然后当我点击其他按钮时，它会向下滑动自己的面板并自动向上滑动另一个面板

请帮忙，非常感谢

Answer 1

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>

Answer 2

将您的 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

Answer 3

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


    }
  );

};

不要使用隐藏的 class 因为你已经在 .panel class 中添加了“display:none”，所以你只需要删除并添加 active class

Answer 4

添加到已经提到语法错误和其他修复的人。您不需要任何循环、数组处理（如 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');
});

没有循环，只有一个事件侦听器，并且您只使用一个当前元素和一个先前活动的元素（如果有的话）！

希望对您有所帮助

这个 javascript 手风琴代码有什么问题？

what is wrong with this javascript accordion code?

javascript

accordion