我有一款手感非常好的手风琴,它在网站上看起来不错,而且应该可以正常工作。不过,我正在尝试为其添加更多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文件,该文件目前允许多个选项卡是开放的一次
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");
}
}
不知道,如果你需要我所有的JavaScript代码的CSS,但继承人的CSS显示面板
div.panel.show {
display: block !important;
}
希望有人可以帮助!提前致谢!
可能的重复[你如何使twitter引导手风琴保持一个组打开](http://stackoverflow.com/questions/15725717/how-do-you-make-twitter-bootstrap-accordion-keep-one-小组打开) –
只需通过所有这些设置,将它们设置为“不活动”并“隐藏”它们。然后你“激活”并“显示”选定的一个。 – melancia
@NalinAggarwal OP在哪里说他在使用Bootstrap? –