CSS与JS实现下拉列表点击需多触发一次才响应该如何修复？

问题根因 #

你遇到的首次点击无响应问题，核心原因是HTMLElement.style属性只能读取元素内联样式中设置的CSS属性，无法读取外部/内部样式表中定义的样式。
你在CSS里给#project-list设置了display: none，但这个值没有写在元素的style属性里，所以第一次点击触发事件时，list.style.display的值是空字符串，不满足=== "none"的判断条件，代码会走else分支，给元素设置display: none的内联样式；第二次点击时，list.style.display已经有了none的值，才会触发显示逻辑，所以才需要多点击一次。

修复方案 #

方案1：读取实际生效的计算样式 #

使用window.getComputedStyle()方法获取元素最终生效的样式值，修改JS代码如下：

document.querySelector('.dropdown-btn').addEventListener("click", function() {
  let list = document.getElementById("project-list");
  // 获取实际生效的display值
  const computedDisplay = window.getComputedStyle(list).display;
  if (computedDisplay === "none") {
    list.style.display = "inline-block";
  } else {
    list.style.display = "none";
  }
});

该方案不需要修改现有HTML和CSS代码，直接替换JS即可生效。

方案2：给元素添加内联初始样式 #

直接在HTML的#project-list元素上添加内联style属性，让首次读取style.display就能拿到正确值：

<ul id="project-list" style="display: none;">
  <li><a href="#">Hello</a></li>
  <li><a href="#">World</a></li>
</ul>

原有JS和CSS不需要改动即可正常运行。

方案3（更推荐）：使用类名切换控制显隐 #

这种方式逻辑更清晰，也更容易扩展样式，修改逻辑如下：

1. 调整CSS，新增激活状态样式：

#project-list {
  list-style-type: none;
  display: none;
  position: relative;
}
/* 新增激活类，控制显示 */
#project-list.active {
  display: inline-block;
}

2. 修改JS代码，用类名切换替代直接修改样式：

document.querySelector('.dropdown-btn').addEventListener("click", function() {
  let list = document.getElementById("project-list");
  list.classList.toggle("active");
});

这种方式不需要手动判断状态，原生的toggle方法会自动判断是否存在类名并完成添加/删除操作，代码更简洁。

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