移动端点击下拉菜单失效求助（CSS与JS均无法正常工作）

我仔细检查了你的代码，发现几个类名拼写和匹配的细节问题，这正是导致CSS样式不生效、JS交互失效的核心原因。下面是具体问题分析和修正方案：

问题1：CSS类名拼写&选择器错误 #

• 你在CSS中写了.functionMobileDropDownDropdown-Content a，但HTML里的下拉内容类名是functionMobileDropDownDropDown-Content（注意是DropDownDropDown，不是合并成Dropdown），单词合并导致样式无法匹配到链接元素。
• .functionMobileDropDownDropDown a:hover选择器指向错误，a标签是嵌套在DropDown-Content容器内的，应该改为.functionMobileDropDownDropDown-Content a:hover才能生效。
• CSS里定义的显示类是.MobileDropDownShow，但JS里调用的是functionMobileDropDownShow，类名完全不匹配，导致点击按钮后无法触发显示/隐藏效果。

问题2：JavaScript类名与CSS不统一 #

JS中切换的类名和CSS里的显示类名称不一致，导致点击逻辑无法联动样式变化。

修正后的完整代码： #

HTML（该部分无问题，直接保留）

<div class="functionMobileDropDownDropDown"> 
  <button onclick="functionMobileDropdown()" class="functionMobileDropDownDropBtn"> Dropdown </button> 
  <div id="functionMobileDropDownMyDropDown" class="functionMobileDropDownDropDown-Content"> 
    <a href="#home">Home</a> 
    <a href="#about">About</a> 
    <a href="#contact">Contact</a> 
  </div> 
</div>

CSS（修正类名拼写与选择器）

.functionMobileDropDownDropBtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.functionMobileDropDownDropBtn:hover, .functionMobileDropDownDropBtn:focus {
  background-color: #2980B9;
}

.functionMobileDropDownDropDown {
  position: relative;
  display: inline-block;
}

.functionMobileDropDownDropDown-Content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 修正类名，与HTML保持一致 */
.functionMobileDropDownDropDown-Content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 修正选择器，指向Content容器内的a标签 */
.functionMobileDropDownDropDown-Content a:hover {
  background-color: #ddd;
}

/* 修正类名，与JS调用保持一致 */
.functionMobileDropDownShow {
  display:block;
}

JavaScript（修正类名匹配）

function functionMobileDropdown() {
  // 类名与CSS定义的显示类保持一致
  document.getElementById("functionMobileDropDownMyDropDown").classList.toggle("functionMobileDropDownShow");
}

window.onclick = function(event) {
  if (!event.target.matches('.functionMobileDropDownDropBtn')) {
    var dropdowns = document.getElementsByClassName("functionMobileDropDownDropDown-Content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      // 统一类名，与CSS保持一致
      if (openDropdown.classList.contains('functionMobileDropDownShow')) {
        openDropdown.classList.remove('functionMobileDropDownShow');
      }
    }
  }
}

这类长类名的拼写一致性问题很容易忽略，修正后下拉菜单的样式和点击交互就能正常工作了。

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