如何解决Bootstrap NavWalker移动端下拉菜单失效问题

在使用WordPress结合Bootstrap开发网站时，Bootstrap NavWalker是常用的导航菜单适配工具，但不少开发者会遇到移动端下拉菜单失效的问题，点击菜单按钮后子菜单无法展开，影响移动端用户的使用体验。

常见失效原因排查

1. Bootstrap JS文件加载问题

Bootstrap的下拉菜单依赖其自带的JS文件，如果JS文件没有正确加载，或者加载顺序在NavWalker的菜单代码之后，就会导致下拉功能失效。需要确认页面中已经引入了正确版本的Bootstrap JS文件，且引入位置在导航菜单代码之前。

2. NavWalker版本不兼容

不同版本的Bootstrap对应的NavWalker版本不同，如果使用了不匹配的NavWalker版本，可能会出现样式或功能异常。比如Bootstrap 5对应的NavWalker和Bootstrap 4的写法有差异，混用就会导致移动端下拉菜单无法正常工作。

3. 触摸事件适配缺失

部分旧版本的NavWalker没有针对移动端触摸事件做适配，点击菜单按钮时无法触发对应的展开逻辑。这种情况需要修改NavWalker的代码，添加触摸事件的处理逻辑。

具体修复方案

方案一：检查依赖加载顺序

首先确认页面中Bootstrap相关资源的加载顺序，正确的顺序应该是先加载jQuery（Bootstrap JS依赖jQuery），再加载Bootstrap JS，最后加载导航菜单的HTML代码。以下是标准的引入示例：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 导航菜单代码放在之后 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <?php
      wp_nav_menu( array(
        'theme_location'  => 'primary',
        'menu_class'      => 'navbar-nav ml-auto',
        'walker'          => new Bootstrap_5_NavWalker(),
      ) );
    ?>
  </div>
</nav>

方案二：更换匹配的NavWalker版本

根据使用的Bootstrap版本选择对应的NavWalker，比如使用Bootstrap 5的话，可以使用适配Bootstrap 5的NavWalker类，核心代码示例如下：

class Bootstrap_5_NavWalker extends Walker_Nav_Menu {
  public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat( "\t", $depth );
    // 下拉菜单的ul添加Bootstrap 5对应的类
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }

  public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
    // 给有子菜单的li添加dropdown类
    if ( in_array( 'menu-item-has-children', $classes ) ) {
      $class_names .= ' dropdown';
    }
    $output .= $indent . '<li class="' . esc_attr( $class_names ) . '">';
    // 子菜单的链接添加dropdown-toggle类，适配Bootstrap 5的下拉触发
    $atts = array();
    $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
    $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
    $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
    $atts['href']   = ! empty( $item->url )        ? $item->url        : '';
    if ( in_array( 'menu-item-has-children', $classes ) ) {
      $atts['class'] = 'nav-link dropdown-toggle';
      $atts['data-bs-toggle'] = 'dropdown';
      $atts['aria-expanded'] = 'false';
    } else {
      $atts['class'] = 'nav-link';
    }
    $attributes = '';
    foreach ( $atts as $attr => $value ) {
      if ( ! empty( $value ) ) {
        $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
        $attributes .= ' ' . $attr . '="' . $value . '"';
      }
    }
    $item_output = $args->before;
    $item_output .= '<a' . $attributes . '>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
}

方案三：修复触摸事件适配

如果上述方案都无效，可以手动给移动端的菜单按钮添加触摸事件监听，强制触发下拉菜单的展开逻辑，示例JS代码如下：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有有下拉菜单的触发按钮
  const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
  dropdownToggles.forEach(function(toggle) {
    // 绑定触摸结束事件
    toggle.addEventListener('touchend', function(e) {
      e.preventDefault();
      // 触发Bootstrap的下拉切换逻辑
      const dropdown = new bootstrap.Dropdown(this);
      dropdown.toggle();
    });
  });
});

验证修复效果

完成上述修改后，可以在移动端设备或者浏览器的移动端模拟模式下访问网站，点击导航菜单的下拉按钮，确认子菜单能够正常展开和收起，同时点击子菜单项可以正常跳转，就说明问题已经修复。

BootstrapNavWalker移动端下拉菜单WordPress导航修改时间：2026-06-05 03:45:14