我在尝试弄清楚如何输入所需的代码以确保事件的 Accordion 在单击另一个 Accordion 时会关闭时感到困惑。
我已经看到其他 fiddle 展示了可行的解决方案,但尽管尝试了但不知道如何将其融入我当前的代码(我是 Javascript 的新手)。
HTML:
<button class="syo-accordion"><h3>Sample Heading</h3></button>
<div class="syo-panel"> <p>Some text example</p></div>
Javascript:
var acc = document.getElementsByClassName("syo-accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
最佳答案
当单击 Accordion 并向其添加 .active
类时,在此步骤之前,您应该检查其他 Accordion 是否已经添加了 .active
类并且删除它。
var acc = document.getElementsByClassName("syo-accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
for (const accordion of acc) { // looping through all of the accorion
if (accordion.classList.contains("active")) {
accordion.classList.remove("active"); // removing class if it contains the active class
}
}
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
关于javascript - 当您选择打开另一个 Accordion 时如何确保 Accordion 关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58789470/