小编Usm*_*far的帖子

我的手风琴效果非常好,它在网站上看起来很棒并且可以正常工作.但是,我正在尝试为它添加更多JavaScript功能,以使其看起来更专业.

目前,手风琴允许您一次打开多个面板,即如果我打开一个标签,然后打开另一个标签,则两个标签将同时打开.关闭这些面板的唯一方法是重新点击标题.

我想要的是一些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;
}

希望有人可以提供帮助!提前致谢!