点击按钮无法为弹出菜单添加show类，JavaScript代码问题排查

你的代码无法为菜单添加show类，核心问题有两个：

1. JavaScript代码执行时机错误 #

如果你的JS代码放在<head>标签内，或者在DOM元素加载完成前就执行，document.getElementById("book-menu")会返回null，调用menu.classList.toggle()时会直接报错，导致菜单显示逻辑完全失效。

2. 点击菜单内部会意外关闭 #

当前的window点击事件逻辑，会在点击菜单选项时也关闭菜单——因为点击菜单子元素时，event.target不匹配.homepage-button，会触发移除show类的操作。

修复后的完整代码 #

HTML（无需修改，确保JS放在正确位置） #

<button onclick="toggleMenu()" id="book-btn" class="homepage-button"> BOOK</button>

<div>
      <ul id="book-menu">
        <li class="book-item">Mitte</li>
        <li class="book-item">Kreuzberg</li>
        <li class="book-item">Zoo</li>
      </ul>
    </div>

CSS（无需修改） #

#book-menu {
    border: solid 2px;
    border-radius: 5px;
    display: none;
    position: fixed;
    width: 20%;
    left: 20%;
    bottom: 20%;
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: 1rem;
    text-align: left;
    background-color: white;
  }

  .book-item {
    text-align: center;
    margin: 5px;
    border: solid 2px;
    border-radius: 5px;
    padding: 8px 20px;
    cursor: pointer;
    list-style: none;
    transition: all 0.3s ease;
  }

  .book-item:hover {
    background-color: red;
  }

  .show {
    display: block;
  }

JavaScript（修复执行时机和点击逻辑） #

// 等待DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  let menu = document.getElementById("book-menu");
  const button = document.getElementById("book-btn");

  // 将toggleMenu挂载到window，确保HTML的onclick能调用到
  window.toggleMenu = () => menu.classList.toggle("show");

  window.onclick = (event) => {
    // 点击的不是按钮，也不是菜单及其子元素时，关闭菜单
    if (!button.contains(event.target) && !menu.contains(event.target)) {
      if(menu.classList.contains('show')){
          menu.classList.remove('show')
      }
    }
  }
});

关键修复点说明 #

• DOMContentLoaded事件：确保代码在所有DOM元素加载完成后执行，避免获取到null元素。
• window.toggleMenu：将函数挂载到全局window对象，确保HTML中的onclick="toggleMenu()"能正确找到该函数。
• 完善的点击判断：使用contains()方法判断点击事件是否来自按钮或菜单内部，避免点击菜单选项时误关闭菜单。

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