HTML onclick下拉菜单桌面正常，移动端无法触发问题求助

问题核心原因 #

1. 关键CSS类未定义：JS逻辑中切换的visible1和hidden1类在CSS代码里完全缺失，导致即使JS执行了类的添加/移除操作，也不会触发任何样式变化。桌面端可能因隐性逻辑暂时生效，但移动端依赖类切换时直接失效。
2. 事件判断逻辑缺陷：window.onclick中使用event.target.matches('.lang img')判断点击目标，移动端点击时可能因事件冒泡或元素嵌套导致目标识别不准确，无法正确关闭下拉菜单。

修复方案 #

1. 补充CSS类定义

在CSS中添加visible1和hidden1类的样式，确保类切换能控制下拉菜单的显示/隐藏：

/* 控制下拉菜单显示的类 */
.dropdown-content.visible1 {
  display: block;
}

/* 控制下拉菜单隐藏的类 */
.dropdown-content.hidden1 {
  display: none;
}

2. 统一JS逻辑，优化事件判断

将window.onclick中的操作改为和toggleDropdown一致的类操作，同时用closest()方法更可靠地判断点击目标是否属于语言选择器区域：

function toggleDropdown() {
  const dropdownMenu = document.getElementById('dropdownMenu');
  if (dropdownMenu) {
    console.log("button clicked");
    console.log("class changed to", dropdownMenu.className);
    if (dropdownMenu.classList.contains('visible1')) {
      dropdownMenu.classList.remove('visible1');
      dropdownMenu.classList.add('hidden1');
    } else {
      dropdownMenu.classList.remove('hidden1');
      dropdownMenu.classList.add('visible1');
    }
    console.log("it is currently", dropdownMenu.className);
  } else {
    console.error("this element does not exist");
  }
}

window.onclick = function(event) {
  // 检查点击目标是否在.lang容器内，不在则关闭所有下拉菜单
  if (!event.target.closest('.lang')) {
    const dropdowns = document.getElementsByClassName('dropdown-content');
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('visible1')) {
        openDropdown.classList.remove('visible1');
        openDropdown.classList.add('hidden1');
      }
    }
  }
}

3. 完善HTML结构

确保语言选择器被正确包裹在desktop-ui和mobile-ui容器中，匹配CSS中的媒体查询规则：

<!-- 桌面端UI容器 -->
<div class="desktop-ui">
  <div class="lang">
    <img src="//cdn.sstatic.net/sites/stackoverflow/img/favicon.ico" alt="Language Icon" onclick="toggleDropdown()" style="width: 35px;height: 35px;">
    <div class="dropdown-content hidden1" id="dropdownMenu">
      <a href="index.html"><img src="https://flagsapi.com/GB/flat/64.png">English</a>
      <a href="index.html"><img src="https://flagsapi.com/CN/flat/64.png">中文</a>
    </div>
  </div>
</div>

<!-- 移动端UI容器 -->
<div class="mobile-ui">
  <div class="lang">
    <img src="//cdn.sstatic.net/sites/stackoverflow/img/favicon.ico" alt="Language Icon" onclick="toggleDropdown()" style="width: 35px;height: 35px;">
    <div class="dropdown-content hidden1" id="dropdownMenu">
      <a href="index.html"><img src="https://flagsapi.com/GB/flat/64.png">English</a>
      <a href="index.html"><img src="https://flagsapi.com/CN/flat/64.png">中文</a>
    </div>
  </div>
</div>

验证步骤 #

1. 补充CSS类后，刷新页面测试移动端下拉菜单，此时点击图标应该能正常切换显示/隐藏。
2. 点击页面其他区域，检查下拉菜单是否能自动关闭。
3. 用开发者工具模拟不同移动设备分辨率，确认响应式切换正常。

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