这个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>
你好，
请我正在尝试编写一个 javascript 手风琴，但我的代码不起作用
我想要做的是当我单击按钮时，它仅通过将活动类添加到此面板并同时向所有其他面板添加隐藏类来显示其面板
所以当我点击按钮时，它会上下滑动
并且只有一个面板显示然后当我单击其他按钮时它会滑下自己的面板并自动向上滑动另一个面板
请提前提供帮助和非常感谢
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
将您的 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
解决方案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');
}
);
};
不要使用隐藏类，因为您已经在.panel类中添加了“ display:none ”，因此您只需要删除并添加active类
解决方案4
1 已采纳 2020-01-15 09:56:07
添加到已经提到语法错误和其他修复的人。 您不需要任何循环、数组处理（如 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代码有什么问题？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.