平板端Dropdown按钮首次点击无响应问题求助

问题根源 #

你的MobileTrainDropdown函数依赖element.style.display判断元素状态，但该属性仅能获取内联样式。而平板端列车菜单的默认隐藏是通过CSS样式表设置的display: none，并非内联样式，所以首次点击时trainElements.style.display为空字符串，不满足=== "none"的条件，函数会执行else分支将其设为none，视觉上无变化；第二次点击时，内联样式已存在，判断生效才会切换为显示。

修复方案 #

把移动端下拉菜单的切换逻辑改成和桌面版一致的类切换方式，更可靠且和现有代码风格统一：

1. 在CSS的平板媒体查询中新增控制显示的类：

@media only screen and (max-width: 1300px){
    /* 保留原有代码，新增以下类 */
    .show-tablet-trains{
        display: flex;
    }
}

2. 替换MobileTrainDropdown函数：

function MobileTrainDropdown() {
  const trainElements = document.getElementById("tablet-trains");
  trainElements.classList.toggle("show-tablet-trains");
  console.log("Mobile TrainDropdown toggled:", trainElements.classList.contains("show-tablet-trains"));
}

3. （可选）补充外部点击关闭逻辑：
   在window的click事件处理函数末尾添加以下代码，确保点击页面其他区域时能关闭移动端列车下拉菜单：

// 关闭移动端列车下拉菜单如果点击外部
if (!event.target.closest('.tablet-train-dropdown')) {
  const mobileDropdown = document.getElementById("tablet-trains");
  if (mobileDropdown.classList.contains('show-tablet-trains')) {
    mobileDropdown.classList.remove('show-tablet-trains');
    console.log("Closed mobile train dropdown:", mobileDropdown);
  }
}

完整修改后的JS代码 #

function TrainDropdown() { 
  const trainMenu = document.getElementById("trains");
  trainMenu.classList.toggle("show");
  console.log("TrainDropdown toggled:", trainMenu.classList.contains("show"));
}

function Menu() {
  const navBar = document.getElementById("phone-nav-bar");
  navBar.classList.toggle("show-nav-bar");
}

function MobileTrainDropdown() {
  const trainElements = document.getElementById("tablet-trains");
  trainElements.classList.toggle("show-tablet-trains");
  console.log("Mobile TrainDropdown toggled:", trainElements.classList.contains("show-tablet-trains"));
}

window.addEventListener("click", function (event) {
  console.log("Window click detected on:", event.target);

  // Close train dropdown if clicked outside the dropdown button
  if (!event.target.closest('.dropdown-button')) {
    const dropdowns = document.getElementsByClassName("train-elements");
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
        console.log("Closed train dropdown:", openDropdown);
      }
    }
  }

  // Close mobile nav menu if clicked outside menu button and nav bar
  const navBar = document.getElementById("phone-nav-bar");
  const menuButton = document.querySelector('.menu-button');
  if (navBar && menuButton && !menuButton.contains(event.target) && !navBar.contains(event.target)) {
    navBar.classList.remove("show-nav-bar");
    console.log("Closed mobile nav menu.");
  }

  // 新增：关闭移动端列车下拉菜单如果点击外部
  if (!event.target.closest('.tablet-train-dropdown')) {
    const mobileDropdown = document.getElementById("tablet-trains");
    if (mobileDropdown.classList.contains('show-tablet-trains')) {
      mobileDropdown.classList.remove('show-tablet-trains');
      console.log("Closed mobile train dropdown:", mobileDropdown);
    }
  }
});

修改后，首次点击就能正常切换下拉菜单的显示状态，逻辑和桌面版保持一致，彻底解决首次点击无响应的问题。

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