JS手风琴开发问题：HTML单次插入导致按钮异常，需频繁刷新页面

问题根源 #

• 原代码通过document.querySelector('.hidden-box')全局查询元素，只要页面中存在一个该元素，所有按钮都会停止插入操作，导致其他手风琴项无法正常加载内容。
• 缺少内容显示/隐藏的切换逻辑，只能通过刷新页面重置状态。

修正后的代码 #

'use strict';
const btn = document.querySelectorAll('.btn');

const html = `<div class="hidden-box" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorum! Laboriosam
    necessitatibus
    architecto voluptate omnis maxime deserunt dolore fugiat, earum nulla. Id voluptas voluptatem
    facere
    accusantium, expedita corrupti beatae temporibus Lorem.</p>
<ul>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nemo!
    </li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit sunt itaque id!
    </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, inventore?
    </li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, consequatur.
    </li>
</ul>
</div>`;

btn.forEach(btn => {
    btn.addEventListener('click', function () {
        // 获取当前按钮所属的手风琴项
        const item = this.closest('.item');
        // 仅在当前手风琴项内部查询内容容器
        let hiddenBox = item.querySelector('.hidden-box');

        if (!hiddenBox) {
            // 不存在则插入预设HTML
            item.insertAdjacentHTML('beforeend', html);
            hiddenBox = item.querySelector('.hidden-box');
        }

        // 切换内容的显示/隐藏状态
        hiddenBox.style.display = hiddenBox.style.display === 'none' ? 'block' : 'none';
    });
});

关键改进点 #

• 局部元素查询：用item.querySelector('.hidden-box')替代全局查询，确保仅检查当前手风琴项内部的内容，不会影响其他按钮的功能。
• 内置切换逻辑：添加显示/隐藏状态切换，点击按钮即可直接控制内容展开/收起，无需刷新页面。
• DOM关系绑定：通过this.closest('.item')关联按钮与对应手风琴项，比依赖循环索引更稳定，避免DOM结构变化导致的错位问题。
• 初始隐藏样式：给插入的内容容器默认添加display: none，保证初始状态为收起状态。

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