隐藏javascript手风琴中的其他元素答案

【问题标题】：Hide other elements in a javascript accordion隐藏javascript手风琴中的其他元素
【发布时间】：2016-06-04 18:44:57
【问题描述】：

我正在尝试使用 html 和 javascript 制作一个简单的手风琴。这是我的html代码：

<button class="accordion" id="part_one">Part One</button>
<div class="panel">
</div>

<button class="accordion" id="part_two">Part Two</button>
<div class="panel">
</div>

还有脚本：

<script>
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");
    }
}</script>

一切正常。但是我想知道是否有一种简单快捷的方法可以在单击一个时隐藏手风琴的其他部分，以确保始终只显示一个块。因为到目前为止，如果我单击每个按钮，我可以同时显示所有内容，但我不喜欢它。

提前感谢您的帮助！ :)

【问题讨论】：

在切换活动类之前，删除 .panel 上的所有活动类
在onclick 方法中，只需从包含accordion 类的所有元素中删除active 类。然后将active 类添加到this 表示当前单击的元素。

标签： javascript html accordion

【解决方案1】：

只需更新 javascript 如下。

	document.addEventListener("DOMContentLoaded", function(event) {
		var acc = document.getElementsByClassName("accordion");
		var panel = document.getElementsByClassName('panel');
		for (var i = 0; i < acc.length; i++) {
			acc[i].onclick = function() {
				var setClasses = !this.classList.contains('active');
				setClass(acc, 'active', 'remove');
				setClass(panel, 'show', 'remove');
				if (setClasses) {
					this.classList.toggle("active");
					this.nextElementSibling.classList.toggle("show");
				}
			}
		}
		function setClass(els, className, fnName) {
			for (var i = 0; i < els.length; i++) {
				els[i].classList[fnName](className);
			}
		}

	});

【讨论】：