函数内设置div.style.display无效，如何实现点击切换元素显示状态？

看起来你已经找对了核心思路——用classList.toggle实现切换，但当前代码有几个小问题导致效果没出来，咱们一步步修正：

先梳理核心问题： #

1. 你写的hidden函数从来没有被调用过，所以里面的div.style.display="none"根本不会执行；
2. 当前的点击事件只做了添加hidden类的操作，没有实现“再次点击移除类”的切换逻辑，完全没用到toggle的能力。

修正方案（完整代码） #

第一步：给hidden类写好CSS样式（这是关键！没有样式的类加了也看不到效果）

.hidden {
    display: none;
}

第二步：简化并修正JavaScript代码

// 获取目标元素，用const更安全（元素引用不会改变）
const p1 = document.getElementById("p1");
// 如果页面只有一个h2，用querySelector比querySelectorAll[0]更简洁
const h2 = document.querySelector("h2");

// 绑定点击事件，用toggle实现类的自动切换
h2.addEventListener("click", function() {
    // toggle会自动判断：元素有hidden类就移除，没有就添加，正好实现点击切换
    p1.classList.toggle("hidden");
});

为什么这样改？ #

• classList.toggle()是专门用来处理这种“切换类存在状态”的场景，完全替代了手动判断类是否存在再添加/移除的繁琐逻辑；
• 把样式写在CSS里而不是用element.style，实现了样式与逻辑分离，后续修改隐藏方式（比如改成opacity: 0）只需要改CSS，不用动JS；
• 移除了没用的hidden函数，精简了代码结构。

如果之后需要更复杂的切换逻辑，也可以在点击事件里加额外判断，比如：

h2.addEventListener("click", function() {
    if (p1.classList.contains("hidden")) {
        // 元素从隐藏切换到显示时的额外逻辑
        console.log("元素现在显示啦");
    } else {
        // 元素从显示切换到隐藏时的额外逻辑
        console.log("元素现在隐藏啦");
    }
    p1.classList.toggle("hidden");
});

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