JavaScript点击按钮无法正常展开下拉菜单问题求助

问题核心错误分析 #

1. JS中ID选择器未加引号：document.getElementById(menu-main)里的menu-main是字符串标识符，必须用引号包裹，否则会被解析为未定义变量，导致无法获取目标元素。
2. CSS优先级冲突：#menu-main是ID选择器，优先级高于类选择器.show，所以即使添加了.show类，display:block也无法覆盖#menu-main的display:none。
3. 事件冒泡触发关闭逻辑：点击按钮时，事件会冒泡到window对象，触发window.onclick里的关闭逻辑，刚添加的.show类会被立刻移除。

修正后的完整代码 #

JavaScript 代码 #

function menudd() {
  // 给ID字符串添加引号，正确获取DOM元素
  document.getElementById("menu-main").classList.toggle("show");
}

window.onclick = function(event) {
  // 排除按钮及其子元素（比如按钮内的图片）触发关闭逻辑
  if (!event.target.matches('.menub') && !event.target.closest('.menub')) {
    var dropdowns = document.getElementsByClassName("ddcontent");
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

alt.css 代码 #

.bg-prim {
    background-color: #7a1d00;
}

.bg-sec-orange {
    background-color: #ba3f1d;
}

.bg-sec-grey {
    background-color: #545f71;
}

.text-bone {
    color: #ece2d0;
}

.nav-button:hover {
    background-color: #7A1D00;
    transition: background-color 100ms ease-in-out;
}

#menu-main {
    display: none;
}

/* 组合选择器提升优先级，确保.show能生效 */
#menu-main.show {
    display: block;
}

修正后的HTML结构 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="output.css">
    <link rel="stylesheet" href="alt.css">
</head>
<body style="background-color: #171614;">
    <div class="flex bg-prim py-1">
        <button onclick="menudd()" class="menub p-2 ml-2"><img src="./content/logowhite.png" width="50" height="50"></button>
        <div id="menu-main" class="ddcontent absolute bg-sec-orange mx-5 min-w-40 z-1">
            <ul>
                <li class="px-12 py-2 block text-center nav-button cursor-pointer">a</li>
                <li class="px-12 py-2 block text-center nav-button cursor-pointer">b</li>
                <li class="px-12 py-2 block text-center nav-button cursor-pointer">c</li>
            </ul>
        </div>
        <div class="relative hidden lg:flex items-center ml-auto pr-6">
            <nav class="text-sm leading-6 font-semibold text-bone">
                <ul class="ddcontent flex space-x-8">
                    <li><a class="bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Artists</a></li>
                    <li><a class="bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- 建议把脚本放在body末尾，确保DOM加载完成后执行 -->
    <script>
        function menudd() {
            document.getElementById("menu-main").classList.toggle("show");
        }

        window.onclick = function(event) {
            if (!event.target.matches('.menub') && !event.target.closest('.menub')) {
                var dropdowns = document.getElementsByClassName("ddcontent");
                for (let i = 0; i < dropdowns.length; i++) {
                    const openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
    </script>
</body>
</html>

额外优化建议 #

• 把JavaScript代码移到<body>标签末尾，确保DOM元素加载完成后再执行，避免出现获取不到元素的情况。
• 使用let/const替代var，符合现代JS规范。

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