WP Bootstrap NavWalker实现下拉菜单时点击触发按钮展开所有子菜单的问题求助

嗨，我看了你遇到的问题——点击一个下拉按钮却所有子菜单都跟着展开，这确实挺闹心的！我帮你拆解下问题根源，然后一步步给你解决方案：

核心问题分析 #

你已经注意到了重复的aria-labelledby="menu-item-dropdown-179"，这就是罪魁祸首！Bootstrap的下拉组件是通过这个属性把触发按钮和对应的子菜单绑定在一起的，所有子菜单都绑定同一个ID的触发按钮，自然一点击就全展开了。而这个问题的本质是你写的WordPress过滤函数破坏了NavWalker原本的结构逻辑：

1. 全局修改$args导致结构混乱：你在nav_menu_link_attributes里修改了$args->before，但$args是全局传递给所有菜单项的，这会导致子菜单也继承了btn-group结构，并且触发按钮的ID没有做层级区分，最终所有子菜单的关联ID都复用了父级的。
2. 标题替换时的结构冲突：在nav_menu_item_title里，你给父菜单项额外加了一个<a>标签，导致每个父菜单项有两个跳转链接，同时打乱了NavWalker生成子菜单关联ID的逻辑。

分步解决方案 #

1. 重构菜单属性过滤函数（修复触发按钮）

不要全局修改$args，只针对当前有子菜单的顶级菜单项添加下拉触发属性，并且给每个触发按钮设置唯一ID：

add_filter( 'nav_menu_link_attributes', function( $atts, $item, $args, $depth ) {
    // 只处理顶级有子菜单的菜单项，避免影响子菜单
    if ( in_array( 'menu-item-has-children', $item->classes ) && $depth === 0 ) {
        $atts['class'] .= ' dropdown-toggle dropdown-toggle-split';
        // Bootstrap 5用data-bs-toggle，Bootstrap 4用data-toggle，根据你的版本调整
        $atts['data-bs-toggle'] = 'dropdown';
        $atts['aria-haspopup'] = 'true';
        $atts['aria-expanded'] = 'false';
        // 用菜单项ID生成唯一触发按钮ID，确保每个下拉对应唯一关联
        $atts['id'] = 'dropdown-toggle-' . $item->ID;
    }
    return $atts;
}, 10, 4 );

2. 调整菜单标题输出（修复结构冲突）

用nav_menu_item_args单独给目标菜单项添加btn-group结构，避免全局污染，同时修正标题的HTML结构：

// 单独给目标菜单项设置前后包裹结构
add_filter( 'nav_menu_item_args', function( $args, $item, $depth ) {
    if ( in_array( 'menu-item-has-children', $item->classes ) && $depth === 0 ) {
        $args->before = '<div class="btn-group" style="flex-direction: row-reverse;">';
        $args->after = '</div>';
    } else {
        // 给其他菜单项重置结构，避免继承
        $args->before = '';
        $args->after = '';
    }
    return $args;
}, 10, 3 );

// 修正菜单标题输出，避免重复链接
add_filter( 'nav_menu_item_title', function( $title, $item, $args, $depth ) {
    if ( in_array( 'menu-item-has-children', $item->classes ) && $depth === 0 ) {
        // 拆分链接和触发按钮，符合Bootstrap split按钮的语义
        $menuLink = '<a href="' . esc_url( $item->url ) . '" class="nav-link">' . esc_html( $item->title ) . '</a>';
        $toggleBtn = '<button type="button" class="dropdown-toggle dropdown-toggle-split" id="dropdown-toggle-' . $item->ID . '" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="visually-hidden">' . esc_html__( 'Toggle Dropdown', 'your-text-domain' ) . '</span>
        </button>';
        // 因为btn-group是row-reverse，所以触发按钮在前，链接在后
        $title = $toggleBtn . $menuLink;
    }
    return $title;
}, 10, 4 );

3. 修复子菜单的关联属性

确保每个子菜单的aria-labelledby对应自己的触发按钮ID，通过nav_menu_submenu_attributes过滤来设置：

add_filter( 'nav_menu_submenu_attributes', function( $atts, $args, $depth ) {
    global $wp_current_nav_menu_item;
    // 给子菜单绑定对应父触发按钮的ID
    if ( $wp_current_nav_menu_item && in_array( 'menu-item-has-children', $wp_current_nav_menu_item->classes ) ) {
        $atts['aria-labelledby'] = 'dropdown-toggle-' . $wp_current_nav_menu_item->ID;
    }
    return $atts;
}, 10, 3 );

4. 优化JS逻辑（避免冲突）

如果用的是Bootstrap自带的下拉JS，其实不需要自己写太多逻辑，只要确保不冲突即可。如果你需要定制，调整后的JS如下：

import $ from 'jquery';
// 引入Bootstrap的JS包，确保自带的下拉功能正常工作
import 'bootstrap/dist/js/bootstrap.bundle.min';

class scriptNavbar {
    constructor() {
        this.events();
    }

    events() {
        $(document).ready(() => {
            // 定制下拉切换逻辑（如果需要）
            $('.main-menu .dropdown-toggle').on('click', function (e) {
                e.preventDefault();
                const $parentItem = $(this).closest('.menu-item-has-children');
                // 关闭同层级其他下拉菜单
                $parentItem.siblings('.menu-item-has-children').find('.dropdown-menu').removeClass('show')
                           .prev('.dropdown-toggle').attr('aria-expanded', 'false');
                // 切换当前下拉菜单
                const $targetMenu = $parentItem.find('.dropdown-menu');
                const isExpanded = $targetMenu.hasClass('show');
                $targetMenu.toggleClass('show');
                $(this).attr('aria-expanded', !isExpanded);
            });

            // 点击外部关闭所有下拉
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.main-menu .btn-group, .main-menu .dropdown-menu').length) {
                    $('.main-menu .dropdown-menu').removeClass('show');
                    $('.main-menu .dropdown-toggle').attr('aria-expanded', 'false');
                }
            });

            // 点击下拉菜单内部不关闭
            $('.main-menu .dropdown-menu').on('click', function (e) {
                e.stopPropagation();
            });
        });
    }
}

export default scriptNavbar;

最后提醒 #

1. 记得根据你用的Bootstrap版本调整data-toggle/data-bs-toggle属性（Bootstrap 5用后者）；
2. 测试前清除WordPress缓存和浏览器缓存，确保加载最新的代码；
3. 如果用了自定义NavWalker，检查它的代码是否和我们的过滤函数有冲突。

备注：内容来源于stack exchange，提问作者Hendra