我的手风琴效果非常好,它在网站上看起来很棒并且可以正常工作 . 但是,我正在尝试为它添加更多JavaScript功能,以使其看起来更专业 .
目前,手风琴允许您一次打开多个面板,即如果我打开一个标签,然后打开另一个标签,则两个标签将同时打开 . 关闭这些面板的唯一方法是重新点击 Headers .
我想要的是一些JavaScript代码,可以防止多个标签一次打开,所以如果我点击一个新面板,它应该首先关闭现有的打开面板 . 这是我的手风琴的HTML代码:
<div class="accordion"><b>Heading 1</b></div>
<div class="panel">
<p class="text-light">Text 1</p>
</div>
<div class="accordion"><b>Heading 2</b></div>
<div class="panel">
<p class="text-light">Text 2</p>
</div>
这是我在单独的JavaScript文件中的JavaScript代码,目前允许一次打开多个选项卡
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
不确定你是否需要所有的CSS,但是用于显示面板的CSS
div.panel.show {
display: block !important;
}
希望有人可以提供帮助!提前致谢!
4 回答
为此,您需要在每次单击时将手风琴的状态重置回其原始状态,然后在单击的元素上设置所需的类 . 为此,您可以提取功能,将类名设置为自己的函数,并根据需要调用它 . 试试这个:
Working example
选择一个项目时,您只需要事先隐藏所有项目 .
变量last将跟踪最后一个活动的手风琴,因此您不需要再次迭代每个手风琴和面板 .
你必须用手风琴覆盖面板,这样你就可以轻松做到这一点 .
参考这个
Working example