一次只能打开一个的手风琴
我有一个非常好的手风琴，它在网站上看起来很好，并且可以正常工作。但是，我正在尝试为其添加更多JavaScript功能，以使其看起来更专业。
目前，手风琴允许您一次打开多个面板，即如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。关闭这些面板的唯一方法是重新单击标题。
我想要的是一些防止同时打开多个选项卡的JavaScript代码，所以如果我单击一个新面板，它应该首先关闭现有的打开面板。这是我的手风琴超文本标记语言代码：
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}<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>共有3个答案
您所需要做的就是添加一个跟踪当前活动元素的变量。每次单击时，您的代码都会将当前活动项目的最大高度更改为0。完成此操作后，它会将刚刚单击的项目的最大高度设置为0，并将该项目设置为当前活动项目。
我已经重写了您的代码，但这绝对适合您。
var acc = document.querySelectorAll(".accordion");
var active = null;
acc.forEach((item, i) => {
item.addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if(active) {
active.style.maxHeight = null;
}
if(panel !== active) {
panel.style.maxHeight = panel.scrollHeight + "px";
active = panel
} else {
active = null
}
});
});.panel {
max-height: 0;
overflow: hidden;
}<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>
<div class="accordion"><b>Heading 3</b></div>
<div class="panel">
<p class="text-light">Text 3</p>
</div>
<div class="accordion"><b>Heading 4</b></div>
<div class="panel">
<p class="text-light">Text 4</p>
</div>- 动态地将数据id添加到每个accordion div（基于0的数据id）
- 单击时-
逻辑是：你需要一些东西来比较，那就是你的开放标志，否则关闭。
我也会使用
panel.style.display: none;
panel.style.display: block;
我最近确实学到了一些东西...当您需要在具有相同父节点的多个节点上侦听事件时，最佳实践之一是使用事件委托，也就是说，侦听父节点上的单击。
然后，您可能需要与包装在中的其他链接进行交互
你仍然需要从这里管理你的动画，但我认为这会对你有所帮助。
// DOM here
let nav = document.querySelector(".nav");
// Handlers here
const clickHandler = function (e) {
if (e.target.classList.contains("nav__link")) {
const link = e.target;
const siblings = link.closest(".nav").querySelectorAll(".nav__link");
link.classList.toggle("active");
// removes all actives except for the clicked one
siblings.forEach((el) => {
if (el !== link) el.classList.remove("active");
});
}
};
// Listeners here
nav.addEventListener("click", clickHandler);body {
font-family: sans-serif;
}
.nav__link {
display: block;
width: 100%;
}
.active {
background: #0f0;
}html prettyprint-override"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="nav">
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#section--1">Section 1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#section--2">Section 2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#section--3">Section 3</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#section--4"
>Section 4</a
>
</li>
</ul>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>-
有这个简单的手风琴，希望一次只打开一个手风琴面板。我的代码一直工作，直到我两次点击同一个面板试图关闭它。它不会关闭，并且总是有一个面板打开。有谁能指出我的逻辑哪里出了问题，以及如何解决？我包含了一段代码片段：
-
我有一个手风琴，它的作品真的很好，它看起来很好的网站和工程，因为它应该。然而，我正在尝试向它添加更多的JavaScript功能，使它看起来更专业。 目前，手风琴允许您一次打开多个面板，即如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。关闭这些面板的唯一方法是重新单击标题。 我想要的是一些防止同时打开多个选项卡的JavaScript代码，所以如果我单击一个新面板，它应该首先关闭现有
-
问题内容： 我的页面上有3个Twitter Bootstrap手风琴，每一个都这样设置： 该“的手风琴s为像上面显示的一个，所以，和。每个手风琴的面板数相同。 如何更改此设置，以便一次只能打开一个面板？目前， 每个手风琴 可以打开一个面板，这不是我想要的行为。 演示： JSFiddle 问题答案： 尝试这个：
-
我有一个手风琴，一次只打开一个面板。我需要一些帮助，以能够关闭任何打开的面板时，用户点击打开一个关闭的面板。我想需要一些javascript来实现这一点——但我不确定如何实现……我将拥有比示例中所示更多的面板 我有以下代码：
-
我正在尝试向我的手风琴添加一个交互式id，但我的代码中出现了一些问题，手风琴打开了每个手风琴项目，我只想在单击它时能够一次打开一个手风琴项目。
-
当另一个手风琴打开时，我必须关闭手风琴。我一次只能显示一个手风琴打开。目前，手风琴允许您一次打开多个面板。如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。我只能显示一个。你能帮我吗？