Question

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

2020-01-15

311

javascript accordion

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

我想要做的是，当我单击按钮时，它只显示其面板，方法是仅向此面板添加活动类，并同时向所有其他面板添加隐藏类

因此，当我单击按钮时，它会切换上下滑动

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

请帮忙，提前谢谢您

Answer 1

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

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

希望它有所帮助

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


    }
  );

};

不要使用隐藏类，因为您已经在 .panel 类中添加了“ display:none ”，因此您只需删除并添加 active 类