修复JS实现按钮点击切换下拉菜单显隐的代码问题

问题根源 #

当前代码无法正常运行的核心原因是JavaScript语法错误：if条件判断的代码块未正确闭合就编写else分支，浏览器解析脚本时会抛出语法错误，导致点击事件的回调逻辑完全不执行。
除此之外你的代码还存在两个潜在问题：

• 脚本标签放在<body>最开头，执行时DOM节点还未渲染完成，大概率会出现获取不到按钮、菜单节点的问题
• CSS、JS资源引用使用本地绝对路径，文件位置变动后会出现资源加载失败的问题

修正后代码 #

JavaScript 部分 #

修正if/else的花括号匹配问题：

const button = document.getElementById("btn");
const list = document.getElementById("list");

// 初始化菜单为隐藏状态
list.style.display = "none";

button.addEventListener("click", () => {
  if (list.style.display === "none") {
    list.style.display = "block";
  } else {
    list.style.display = "none";
  }
});

注：判断相等建议使用严格相等===，避免隐式类型转换带来的异常判断。

HTML 部分 #

调整脚本引入位置到所有DOM节点之后，同时将资源路径改为相对路径：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>下拉菜单</title>
  <link rel="stylesheet" href="dropdown.css">
</head>
<body>
  <button id="btn">Click Here</button>
  <ul id="list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
  <script src="dropdown.js"></script>
</body>
</html>

实现效果 #

修正后即可实现预期交互：

• 页面初始加载时菜单默认收起隐藏
• 点击按钮菜单展开显示
• 再次点击按钮菜单重新收起，循环切换

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