Bootstrap 3.3.2移动端导航父按钮点击后子菜单不显示问题排查

问题分析 #

你的导航DOM结构是正常的（添加CSS后子菜单能正常显示），核心问题是Bootstrap 3.3 默认没有为移动端导航的父菜单提供点击展开子菜单的交互逻辑——桌面端靠悬停触发，平板分辨率下可能是你的CSS让子菜单默认显示，但移动端缺少点击触发的事件绑定。

具体修复步骤 #

1. 添加JavaScript点击事件处理

针对移动端屏幕（767px及以下），为带下拉菜单的父菜单项绑定点击事件，阻止跳转并切换子菜单显示状态：

$(document).ready(function() {
  function initMobileDropdown() {
    const isMobile = $(window).width() <= 767;
    const dropdownItems = $('.navbar-nav li.dropdown');

    if (isMobile) {
      dropdownItems.off('click').on('click', function(e) {
        // 阻止父链接默认跳转行为
        e.preventDefault();
        // 切换子菜单的显示/隐藏状态
        $(this).find('.dropdown-menu').toggle();
        // 可选：给父菜单添加激活状态标识，方便样式区分
        $(this).toggleClass('dropdown-active');
      });
    } else {
      // 桌面端移除点击事件，恢复默认悬停逻辑
      dropdownItems.off('click');
    }
  }

  // 页面加载时初始化
  initMobileDropdown();
  // 窗口尺寸变化时重新适配
  $(window).resize(initMobileDropdown);
});

2. 补充移动端适配CSS

优化子菜单在移动端的显示样式，同时添加父菜单的状态标识：

@media (max-width: 767px) {
  /* 给父菜单添加下拉箭头 */
  .navbar-nav li.dropdown > a:after {
    content: " ▼";
    font-size: 0.8em;
    margin-left: 6px;
  }
  /* 激活状态切换箭头方向 */
  .navbar-nav li.dropdown-active > a:after {
    content: " ▲";
  }
  /* 移动端子菜单默认隐藏，取消浮动保持垂直布局 */
  .dropdown-menu {
    display: none;
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
    padding-left: 15px; /* 可选：子菜单缩进，层级更清晰 */
  }
}

关键说明 #

• 通过窗口宽度判断移动端/桌面端，确保交互逻辑在不同屏幕下互不干扰；
• 使用off('click')避免重复绑定事件，防止窗口 resize 后出现多次触发的问题；
• 子菜单用toggle()控制显示，配合CSS的静态定位，保证移动端导航的垂直布局合理性。

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