如何修改JS折叠面板代码实现同一时间仅一个面板展开

可直接复用的修改后JS代码 #

const buttons = document.querySelectorAll('.collaps');
const colls = document.querySelectorAll('.collaps_content');

buttons.forEach((thisButton, index) => {
    thisButton.addEventListener('click', () => {
        // 存储当前点击项的原有展开状态
        const isCurrentVisible = colls[index].style.display === 'block';
        // 先关闭所有折叠面板
        colls.forEach(item => item.style.display = 'none');
        // 切换当前点击项的状态
        colls[index].style.display = isCurrentVisible ? 'none' : 'block';
    });
});

实现逻辑说明 #

• 无需修改原有HTML代码，仅替换JS部分即可生效
• 点击按钮时首先记录当前对应面板的展开状态，避免全量关闭后丢失原有状态
• 全量遍历所有折叠面板统一设为隐藏，保证同一时间最多只有一个面板处于展开状态
• 根据之前存储的原有状态反向设置当前面板的显示状态，同时兼容「点击已展开面板可收起」的交互需求

可选优化方案（推荐） #

可以通过CSS类控制显隐，避免直接操作内联样式，后续维护扩展更灵活：

1. 新增CSS样式：

.collaps_content {
    display: none;
}
.collaps_content.active {
    display: block;
}

2. 对应修改JS代码：

const buttons = document.querySelectorAll('.collaps');
const colls = document.querySelectorAll('.collaps_content');

buttons.forEach((thisButton, index) => {
    thisButton.addEventListener('click', () => {
        const isCurrentActive = colls[index].classList.contains('active');
        colls.forEach(item => item.classList.remove('active'));
        colls[index].classList.toggle('active', !isCurrentActive);
    });
});

内容的提问来源于stack exchange，提问作者Ruan