如何用JS函数切换CSS元素显示？现有代码问题排查

核心问题1：CSS选择器错误 #

你写的.popUpNames .show是后代选择器，表示选中.popUpNames内部的.show元素，但实际我们需要的是同时拥有popUpNames和show类的同一个元素，所以要去掉空格，改成：

.popUpNames.show {
  visibility: visible;
}

核心问题2：JS获取元素方式不匹配 #

你的HTML里的div只有class="popUpNames"，但JS里用document.getElementById("popUpNames")去获取——这个方法是找id属性为popUpNames的元素，自然找不到。有两种修复方式：

• 方式一：给HTML的div加上id：

<div class="popUpNames" id="popUpNames">
    <p></p>
</div>

• 方式二：修改JS用类选择器获取：

function togglePopup() {
  var popup = document.querySelector(".popUpNames");
  popup.classList.toggle("show");
}

额外验证建议 #

可以在togglePopup函数里加一行日志，确认函数确实被调用：

function togglePopup() {
  console.log("函数触发了"); // 打开浏览器控制台查看是否输出
  var popup = document.querySelector(".popUpNames");
  popup.classList.toggle("show");
}

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