点击触发下拉菜单失效求助：修改W3Schools教程代码后无法工作

我帮你排查了代码里的几个关键问题，这就是菜单点击后没反应的原因，咱们一步步修复：

问题1：CSS过渡属性语法错误+透明度未重置 #

你的.dropdown-content里的过渡代码少了时间单位s，导致过渡逻辑不生效；而且.show类没有重置opacity——虽然设置了display:block，但菜单还是保持透明状态，自然看不到。

问题2：点击事件的目标判断偏差 #

按钮内部嵌套了<li>图标元素，点击时event.target是这个图标，不是.dropbtn按钮本身，导致window.onclick里的关闭逻辑误触发，刚展开的菜单立刻被关掉了。

额外语义问题 #

HTML里<button>内部嵌套<li>不符合语义规范，换成<span>更合适。

下面是修复后的完整代码：

修复后的JavaScript代码 #

function myFunction() { 
  document.getElementById("myDropdown").classList.toggle("show"); 
}

window.onclick = function(event) { 
  // 改用closest判断是否点击了按钮或按钮内部元素，避免图标干扰
  if (!event.target.closest('.dropbtn')) { 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
        openDropdown.classList.remove('show'); 
      } 
    } 
  } 
}

修复后的CSS代码 #

.dropdown { 
  float: right; 
  margin-right: 115px; 
  overflow: hidden; 
  /* 新增：让下拉菜单的absolute定位相对于父容器 */
  position: relative;
}
.dropdown .dropbtn { 
  font-size: 16px; 
  border: none; 
  outline: none; 
  color: white; 
  padding: 14px 16px; 
  background-color: #ff0000; 
  font-family: inherit; 
  margin: 0; 
}
.dropbtn:hover { 
  cursor: pointer; 
}
.dropdown:hover { 
  background-color: #ff7b7b; 
  text-decoration: none; 
}
.dropdown-content { 
  display: none; 
  position: absolute; 
  background-color: #ff0000 !important; 
  min-width: 160px; 
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
  z-index: 1; 
  opacity: 0; 
  -webkit-transition: opacity .3s ease-in; 
  -moz-transition: opacity .3s ease-in; 
  -o-transition: opacity .3s ease-in; 
  /* 修复：补充时间单位s */
  transition: opacity .3s ease-in; 
}
.dropdown-content a { 
  float: none; 
  color: black; 
  padding: 14px 16px; 
  text-decoration: none; 
  display: block; 
}
.dropdown-content a:hover { 
  background-color: #ff7b7b; 
}
.show { 
  display: block; 
  z-index: 11; 
  /* 修复：重置opacity为1，让菜单可见 */
  opacity: 1; 
}

修复后的HTML代码 #

<div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">
    <!-- 修复：把li换成符合语义的span -->
    <span class="fa fa-bars fa-2x"></span>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="signup.php" style="color: white;">Signup</a>
    <a href="#" style="color: white;">Info</a>
    <a href="#" style="color: white;">Last news</a>
  </div>
</div>

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