点击切换菜单仅生效一次，求实现重复开闭功能的技术方案

你的代码只能执行一次的核心问题是：不管点击时元素是否已有num_com_user类，你都直接将classList赋值为这个类，导致第一次点击后，元素的class被固定为num_com_user，后续点击的判断逻辑永远进入同一个分支，无法切换状态。

修复后的代码方案 #

方法1：直接切换显示状态（无需额外CSS）

let txt_com = document.querySelector(".text_user");
let num_com_user = document.querySelector(".massage_for_user");

txt_com.addEventListener("click", function() {
  // 切换触发元素的类（用toggle替代直接赋值）
  this.classList.toggle("num_com_user");
  // 根据当前显示状态切换目标元素的display
  num_com_user.style.display = num_com_user.style.display === "block" ? "none" : "block";
})

方法2：用CSS类控制显示（更推荐，符合语义化）

先添加CSS规则：

/* 默认隐藏消息，可根据需求调整初始状态 */
.massage_for_user {
  display: none;
}

/* 显示状态的类 */
.massage_for_user.active {
  display: block;
}

再修改JavaScript：

let txt_com = document.querySelector(".text_user");
let num_com_user = document.querySelector(".massage_for_user");

txt_com.addEventListener("click", function() {
  // 切换触发元素的样式类
  this.classList.toggle("num_com_user");
  // 切换消息元素的显示类
  num_com_user.classList.toggle("active");
})

原代码失效的具体原因 #

原代码中，无论if条件是否成立，你都执行this.classList = "num_com_user"——这会完全覆盖元素的原有class，第一次点击后，元素的class就固定为num_com_user了。后续点击时，this.classList.contains("num_com_user")永远为true，只会执行隐藏逻辑，无法回到显示状态。

用classList.toggle()方法可以自动添加/移除指定类，配合显示状态的切换，就能实现每次点击都触发菜单的打开/关闭。

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