我有一个功能良好的手风琴列表，可让我向列表中添加新项目，它们将立即具有手风琴功能。虽然，我想一次只打开一个手风琴项目。我找到的所有答案都是静态列表，对解决我的问题没有太大帮助。如果这是一个不好的问题，我深表歉意，但是我已经花了数小时没有运气，而且我也没主意。预先感谢您的帮助。
HTML：HTML还有更多内容。我刚刚添加了相关元素。
<body>
<div class="container">
<!-- New accordion item added here -->
</div>
<script src="main.js"></script>
</body>
Javascript：
// Get items
const addAccBtn = document.getElementById('addAccBtn');
const container = document.querySelector('.container');
addAccBtn.addEventListener('click', e => {
e.preventDefault();
let newAccItem = document.createElement('div');
newAccItem.innerHTML = `
<div class="acc-title">
<i class="fas fa-trash delete"></i>
<h3 class="header-click">${accName}</h3>
<i class="fas fa-sort-down down-arrow"></i>
</div>
<div class="acc-info hidden">
<i class="far fa-edit"></i>
<h4>Section 1</h4>
<p>${input1}</p>
<h4>Section 2</h4>
<p>${input2}</p>
</div>
`;
container.appendChild(newAccItem);
let downBtn = newAccItem.firstElementChild.childNodes[5]; // .down-arrow
let info = newAccItem.firstElementChild.nextElementSibling; // .acc-info
downBtn.addEventListener('click', () => {
if(downBtn.parentElement.nextElementSibling == info && info.classList.contains('hidden')) {
info.classList.remove('hidden');
info.classList.add('active');
}
else {
info.classList.remove('active');
info.classList.add('hidden');
}
});
});
再次，手风琴项目将全部打开和关闭，我希望一次打开一个项目。再次感谢您的宝贵时间。
我相信这些行应该有用
...
let downBtn = newAccItem.firstElementChild.childNodes[5]; // .down-arrow
let info = newAccItem.firstElementChild.nextElementSibling; // .acc-info
downBtn.addEventListener('click', () => {
//here you close all opened accordions ---------------
document.querySelectorAll(".acc-info.active").forEach(element => {
if (element !== info) {
element.classList.remove("active");
element.classList.add("hidden");
}
};
// --------------------------------------
if(downBtn.parentElement.nextElementSibling == info && info.classList.contains('hidden')) {
info.classList.remove('hidden');
info.classList.add('active');
}
else {
info.classList.remove('active');
info.classList.add('hidden');
}
});
});
_编辑_
添加了if