为什么我的JavaScript click点击事件仅能触发执行一次？

问题原因 #

你的代码逻辑只在首次打开div时修改了moreInfo的类名，关闭时没有重置类名状态，导致后续点击逻辑走不通：

• 首次点击：moreInfo.className为空，设置为open同时显示div
• 第二次点击：moreInfo.className为open，进入else分支隐藏div，但类名仍保持open未重置
• 第三次及后续点击：moreInfo.className一直是open，每次都进入else分支重复执行display: none，自然没有交互变化

修复方案 #

在关闭分支补充重置类名的逻辑即可：

let readMore = document.getElementById('clickAbout');
let moreInfo = document.getElementById('about');
let changeSepa = document.getElementById('sepChange');

readMore.addEventListener('click', function(){
    changeSepa.style.height = '2rem';
    if (moreInfo.className == "") {
        moreInfo.className = "open";
        moreInfo.style.display = 'block';
    } else {
        moreInfo.className = ""; // 新增这行重置类名状态
        moreInfo.style.display = 'none';
    }
});

优化建议 #

如果后续moreInfo可能会添加其他类名，直接判断className == ""会失效，推荐用classList操作类状态，兼容性和鲁棒性更强：

readMore.addEventListener('click', function(){
    changeSepa.style.height = '2rem';
    if (!moreInfo.classList.contains('open')) {
        moreInfo.classList.add('open');
        moreInfo.style.display = 'block';
    } else {
        moreInfo.classList.remove('open');
        moreInfo.style.display = 'none';
    }
});

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