如何让手风琴菜单按钮的onclick事件单次点击触发？

问题原因 #

你的按钮HTML里通过onclick="accordion()"绑定了点击事件，而accordion()函数内部又给所有.levelTab元素重复添加了click事件监听器：

• 第一次点击按钮时，仅执行了accordion()函数完成事件绑定，并没有触发展开/收起的核心逻辑；
• 第二次点击才会触发刚绑定的toggle逻辑，所以出现双击才生效的情况。

解决方案（二选一即可） #

方案一：移除内联onclick，页面加载时自动初始化（推荐）

修改后的HTML：

<button class="levelTab">Cantrips</button>
<div class="levelContain">
    <p>
        insert Spells here.
    </p>
</div>

修改后的JavaScript（确保页面元素加载完成后执行）：

document.addEventListener('DOMContentLoaded', function() {
    const acc = document.getElementsByClassName("levelTab");
    for (let a = 0; a < acc.length; a++) {
        acc[a].addEventListener('click', function() {
            this.classList.toggle('active');
            const levelContain = this.nextElementSibling;
            if (levelContain.style.maxHeight) {
                levelContain.style.maxHeight = null;
            } else {
                levelContain.style.maxHeight = levelContain.scrollHeight + "px";
            }
        });
    }
});

方案二：保留内联onclick，避免重复绑定（适合无法修改HTML的场景）

修改后的JavaScript：

// 添加标记，确保事件仅绑定一次
let accordionIsInitialized = false;

function accordion() {
    if (accordionIsInitialized) return;

    const acc = document.getElementsByClassName("levelTab");
    for (let a = 0; a < acc.length; a++) {
        acc[a].addEventListener('click', function() {
            this.classList.toggle('active');
            const levelContain = this.nextElementSibling;
            if (levelContain.style.maxHeight) {
                levelContain.style.maxHeight = null;
            } else {
                levelContain.style.maxHeight = levelContain.scrollHeight + "px";
            }
        });
    }
    accordionIsInitialized = true;
}

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