如何一键触发onclick事件？

Question

又是我！我一直在努力让手风琴菜单正常工作，并且我设法让它工作......主要问题是，它只能在双击按钮时触发。

我想这样做，以便用户只需单击按钮一次。我的代码中还有其他按钮的用法，只需单击一下即可使用，而这个按钮确实遵循其格式，但我不知道是什么使它只能在双击时触发。

这是 Javascript——只有将它放入 function() 中才能使其工作，仅仅忽略该函数将不允许脚本工作。

function accordion() {

const acc = document.getElementsByClassName("levelTab");
var a;

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

和 HTML

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

Answer 1

这里的问题似乎与您将

onclick

事件附加到按钮的方式有关。

您在单击按钮时调用

accordion()

函数，然后在该函数中，您将额外的

click

事件侦听器附加到

levelTab

类。这意味着第一次单击按钮时，将添加事件侦听器。第二次单击时，将执行事件侦听器的操作。

如何修复的示例：

Javascript

window.onload = function() {
    const acc = document.getElementsByClassName("levelTab");
    Array.from(acc).forEach((element) => {
        element.onclick = function() {
            this.classList.toggle('active');
            var levelContain = this.nextElementSibling;

            if (levelContain.style.maxHeight) {
                levelContain.style.maxHeight = null;
            } else {
                levelContain.style.maxHeight = levelContain.scrollHeight + "px";
            }
        }
    });
}

HTML

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