这个javascript手风琴代码有什么问题？
[英]what is wrong with this javascript accordion code?
问题描述
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>
Hello,
你好，
please I am trying to code a javascript accordion, but my code does not work请我正在尝试编写一个 javascript 手风琴，但我的代码不起作用
what I want to do is when I click on button, it shows its panel only by adding active class to this panel only and adding hidden class to all other panels at the same time我想要做的是当我单击按钮时，它仅通过将活动类添加到此面板并同时向所有其他面板添加隐藏类来显示其面板
so when I click on button it toggles sliding up and down所以当我点击按钮时，它会上下滑动
and only one panel shows then when I click on other button it slide down its own panel and automatically slide up the other panel并且只有一个面板显示然后当我单击其他按钮时它会滑下自己的面板并自动向上滑动另一个面板
please help and many thanks in advance请提前提供帮助和非常感谢
4 个解决方案
解决方案1
1 2020-01-15 09:17:12
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>
解决方案2
1 2020-01-15 09:19:01
Change your JavaScript code to the following:将您的 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');
});
});
}
Code here: https://codepen.io/v08i/pen/RwNBJKN代码在这里： https : //codepen.io/v08i/pen/RwNBJKN
解决方案3
1 2020-01-15 09:50:53
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');
}
);
};
Don't use hidden class as you have already added " display:none " in .panel class , so you just need to remove and add active class不要使用隐藏类，因为您已经在.panel类中添加了“ display:none ”，因此您只需要删除并添加active类
解决方案4
1 已采纳 2020-01-15 09:56:07
Adding to guys who already mentioned syntax errors and other fixes.添加到已经提到语法错误和其他修复的人。 You don't need any loops, array processings like in forEach and so on, and many event listeners for each button.您不需要任何循环、数组处理（如 forEach 等）以及每个按钮的许多事件侦听器。 Here is plain and simple solution with event listener on section:这是带有事件侦听器部分的简单明了的解决方案：
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');
});
No loops, only one event listener, and you work only with one current element and one previously active (if any)!没有循环，只有一个事件侦听器，并且您只能使用一个当前元素和一个以前处于活动状态的元素（如果有）！
Hope it helps希望能帮助到你
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.