移动端带子项Dropdown Menu无法展开问题求助

问题根源 #

你用的data-hover="dropdown"是基于鼠标悬停的触发逻辑，但移动端是触摸设备，没有hover事件，点击导航项时自然不会触发下拉菜单展开。另外如果没正确引入Bootstrap的JS组件，也会直接导致下拉功能失效。

快速修复方案 #

1. 切换到Bootstrap默认的点击触发 #

把所有下拉项的data-hover="dropdown"改成data-toggle="dropdown"，同时确保页面已经引入jQuery和Bootstrap JS（注意顺序：jQuery必须在Bootstrap之前加载）：

修改后的下拉项示例：

<li class="dropdown">
  <a href="about.html" class="dropdown-toggle" data-toggle="dropdown" data-delay="350" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>
      <a href="about.html">About Us</a>
    </li>
    <li>
      <a href="visit-pilar.html">Visit Pilar</a>
    </li>
  </ul>
</li>

2. 兼顾桌面端hover和移动端点击（进阶） #

如果想保留桌面端悬停展开、移动端点击展开的差异化体验，可以加一段自定义JS：

// 根据屏幕尺寸切换下拉触发逻辑
function setupDropdownTriggers() {
  if ($(window).width() < 768) {
    // 移动端：绑定点击事件，阻止默认跳转并切换展开状态
    $('.dropdown-toggle').off('mouseenter mouseleave').on('click', function(e) {
      e.preventDefault();
      $(this).parent().toggleClass('open');
    });
  } else {
    // 桌面端：绑定悬停事件切换展开状态
    $('.dropdown-toggle').off('click').on('mouseenter mouseleave', function() {
      $(this).parent().toggleClass('open');
    });
  }
}

// 页面加载时初始化，窗口大小变化时重新适配
$(document).ready(setupDropdownTriggers);
$(window).resize(setupDropdownTriggers);

同时确保CSS基础样式正确，避免下拉菜单显示异常：

.dropdown-menu {
  display: none;
}
.dropdown.open .dropdown-menu {
  display: block;
}

额外检查点 #

• 检查父元素#navbar的collapse类，确认移动端汉堡菜单点击后能正常显示导航列表
• 打开开发者工具（F12）的Console面板，排查是否有JS报错阻断了功能
• 确认没有其他自定义JS阻止了下拉项的点击事件冒泡

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