Bootstrap响应式导航按钮失效：WordPress主题移动端下拉菜单故障

看起来你在把Bootstrap导航集成到WordPress主题时遇到了移动端下拉失效的问题，这是个很常见的坑，我帮你梳理几个最可能的原因和解决办法：

1. 先确认Bootstrap版本对应的属性是否正确 #

如果你的主题用的是Bootstrap 5，那触发下拉的属性已经从旧版的data-toggle/data-target改成了data-bs-toggle/data-bs-target！你的代码里写的是data-toggle，这很可能是问题所在。修改按钮部分的代码：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

同时要确保你的折叠容器ID和data-bs-target完全匹配，也就是必须有：

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <!-- 你的WordPress菜单在这里 -->
</div>

2. 确保jQuery和Bootstrap JS的加载顺序正确 #

WordPress自带jQuery，但默认是noConflict模式，直接用$会报错，而且Bootstrap JS必须在jQuery之后加载。在你的主题functions.php里添加正确的脚本加载代码：

function my_theme_enqueue_scripts() {
    // 加载WordPress自带的jQuery（不用自己上传）
    wp_enqueue_script('jquery');
    
    // 加载Bootstrap JS，依赖jQuery
    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/path/to/bootstrap.min.js', array('jquery'), '5.3.0', true);
    
    // 自定义JS，处理noConflict问题
    wp_enqueue_script('custom-theme-js', get_template_directory_uri() . '/js/custom.js', array('jquery', 'bootstrap-js'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

然后在custom.js里用jQuery的noConflict包装器：

jQuery(document).ready(function($) {
    // 这里可以安全使用$，比如加个调试看看按钮是否触发
    $('.navbar-toggler').on('click', function() {
        console.log("导航按钮被点击了");
    });
});

打开浏览器控制台，如果点击按钮能看到这个日志，说明JS已经正常加载了。

3. 用自定义Nav Walker生成符合Bootstrap结构的菜单 #

WordPress默认的wp_nav_menu生成的HTML结构和Bootstrap要求的不一样（比如缺少nav-item、nav-link这些类），所以需要一个自定义的Walker来生成正确的结构。在functions.php里添加这个Walker类：

class Bootstrap_Navwalker extends Walker_Nav_Menu {
    public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $classes = empty($item->classes) ? [] : (array)$item->classes;
        $classes[] = 'nav-item';
        
        // 处理下拉菜单的类
        if ($args->walker->has_children && $depth === 0) {
            $classes[] = 'dropdown';
        } elseif ($depth > 0) {
            $classes[] = 'dropdown-item';
        }
        
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        
        $output .= '<li' . $class_names . '>';
        
        $atts = [];
        $atts['title'] = !empty($item->attr_title) ? $item->attr_title : '';
        $atts['target'] = !empty($item->target) ? $item->target : '';
        $atts['rel'] = !empty($item->xfn) ? $item->xfn : '';
        
        // 处理顶级下拉菜单的链接
        if ($args->walker->has_children && $depth === 0) {
            $atts['href'] = '#';
            $atts['class'] = 'nav-link dropdown-toggle';
            $atts['data-bs-toggle'] = 'dropdown';
            $atts['aria-expanded'] = 'false';
        } else {
            $atts['href'] = !empty($item->url) ? $item->url : '';
            $atts['class'] = 'nav-link';
            // 标记当前页面的链接
            if ($item->current || $item->current_item_ancestor) {
                $atts['class'] .= ' active';
                $atts['aria-current'] = 'page';
            }
        }
        
        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);
        
        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (!empty($value)) {
                $value = ('href' === $attr) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }
        
        $title = apply_filters('the_title', $item->title, $item->ID);
        $title = apply_filters('nav_menu_item_title', $title, $item, $args, $depth);
        
        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
        
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}

然后调用wp_nav_menu时指定这个Walker：

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary-menu', // 要和你在register_nav_menus里定义的一致
        'container' => false,
        'menu_class' => 'navbar-nav me-auto mb-2 mb-md-0',
        'fallback_cb' => '__return_false',
        'depth' => 2,
        'walker' => new Bootstrap_Navwalker()
    ));
    ?>
</div>

4. 检查资源路径是否正确 #

你的代码里用了<?php bloginfo(template_directory); ?>，更推荐用get_template_directory_uri()（因为它返回字符串，适合用在echo里），比如：

<img src="<?php echo get_template_directory_uri(); ?>/resources/images/Logo-blue-copy.png" alt="Site Logo">

打开浏览器的「开发者工具」→「Network」标签，刷新页面，看看Bootstrap的CSS、JS文件有没有404错误，如果有，说明路径写错了，要调整到正确的文件位置。

5. 排查插件冲突 #

有时候其他WordPress插件的JS会和Bootstrap冲突，你可以暂时禁用所有插件，然后刷新页面测试下拉菜单是否正常。如果正常了，再逐个启用插件，找到导致冲突的那个，要么更换插件，要么修改插件的JS代码。

按照这些步骤排查，应该能解决你的移动端下拉菜单问题。

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