Javascript WP Bootstrap NavWaker：下拉菜单一次打开所有下拉菜单

我在使用Bootstrap和WordPress实现下拉菜单时遇到了困难.我使用过滤器将‘DropDown-Togger-Split’类添加到具有子菜单的菜单项的链接元素中.然而，在配置后，下拉菜单的行为并不像预期的那样.当我点击第一个下拉切换菜单项时，会出现所有子菜单，而不仅仅是相关菜单项的子菜单.也许你可以看看这张图片:

说明:

WordPress过滤器用法:我正在使用NAV_MENU_LINK_ATTRIBUTES和NAV_MENU_ITEM_TITLE过滤器来修改具有子菜单的菜单项上的链接元素的属性和内容.我的目标是将DropDown-Togger-Split类添加到链接元素中，并更改这些菜单元素的HTML struct 以满足Bootstrap的要求.以下是代码:

 add_filter( 'nav_menu_link_attributes', function( $atts, $item, $args, $depth ) {
    // Cek jika menu item memiliki submenu

    if ( in_array( 'menu-item-has-children', $item->classes ) ) {
        $args->before = '<div class="btn-group" style="flex-direction: row-reverse;">';
        // $args->before .= '<a href="'.$item->url.'" class="nav-link">'.$item->title.'</a>';
        $atts['class'] .= ' dropdown-toggle dropdown-toggle-split';
        // Tambahkan data-toggle dan aria-haspopup ke atribut
        $atts['data-toggle'] = 'dropdown';
        $atts['aria-haspopup'] = 'true';
    }
    // Kembalikan array $atts yang telah dimodifikasi
    return $atts;
}, 10, 4 );

add_filter( 'nav_menu_item_title', function( $title, $item, $args, $depth ) {
    // Cek jika menu item memiliki submenu
    if ( in_array( 'menu-item-has-children', $item->classes ) ) {
        // Bungkus judul dengan elemen <span> yang memiliki class visually-hidden
        $title = '<span class="visually-hidden">' . esc_html__( 'Toggle Dropdown', 'your-text-domain' ) . '</span>';
        // Tambahkan elemen <a> untuk tautan menu
        $title .= '<a href="' . esc_url( $item->url ) . '" class="nav-link">' . esc_html( $item->title ) . '</a>';
        // Tambahkan div penutup untuk btn-group
        $args->after = '</div>';
    }
    // Kembalikan judul yang telah dimodifikasi
    return $title;
}, 10, 4 );

由于这段代码，我得到了具有相同aria-Labelledby="Menu-Item-Dropdown-179"的重复的‘ul Dropdown-Menu show’.

以下是html元素:

<li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-has-children dropdown active menu-item-179 nav-item">
    <div class="btn-group" style="flex-direction: row-reverse;">
        <a href="#" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle nav-link dropdown-toggle dropdown-toggle-split" id="menu-item-dropdown-179" aria-current="page" aria-haspopup="true">
            <span itemprop="name"><span class="visually-hidden">Toggle Dropdown</span></span>
        </a>
        <a href="http://localhost/wc_course/sample-page/" class="nav-link">Sample Page</a>
    </div>
    <ul class="dropdown-menu show" aria-labelledby="menu-item-dropdown-179">
        <li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-187 nav-item">
            <div class="btn-group" style="flex-direction: row-reverse;">
                <a itemprop="url" href="http://localhost/wc_course/sample-page-2/" class="dropdown-item dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true">
                    <span itemprop="name"><span class="visually-hidden">Toggle Dropdown</span></span>
                </a>
                <a href="http://localhost/wc_course/sample-page-2/" class="nav-link">Sample Page 2</a>
            </div>
            <ul class="dropdown-menu show" aria-labelledby="menu-item-dropdown-179">
                <li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188 nav-item">
                    <div class="btn-group" style="flex-direction: row-reverse;">
                        <a itemprop="url" href="http://localhost/wc_course/winter-warm-up-sale/" class="dropdown-item"><span itemprop="name">Winter Warm-up Sale</span></a>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</li>

这是我的Java脚本文件:

import $ from 'jquery';

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

    events() {
        $(document).ready(() => {
            $('.main-menu .dropdown-toggle').on('click', function (e) {
                e.preventDefault();
                // Close other dropdown-menus within the same level
                $(this).closest('.menu-item-has-children').siblings('.menu-item-has-children').find('.dropdown-menu').removeClass('show');
                // Toggle class for the clicked dropdown-menu
                $(this).closest('.menu-item-has-children').find('.dropdown-menu').toggleClass('show');
            });
        
            // Close dropdown-menus when clicking outside of them
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.main-menu .dropdown').length) {
                    $('.main-menu .dropdown .dropdown-menu').removeClass('show');
                }
            });
            // Prevent closing the dropdown-menu when clicking inside it
            $('.main-menu .dropdown-menu').on('click', function (e) {
                e.stopPropagation();
            });
        });        
    }
}

export default scriptNavbar;

我怀疑这个问题源于重复的‘下拉菜单显示’元素，但我无法找到解决方案，因为WordPress Bootstrap NavWalker会自动生成这些元素的递增数字.如能协助解决这一问题，我们将不胜感激.提前感谢您的帮助！

我预计在单击下拉切换菜单项时，只会出现与该特定菜单项相关联的子菜单.换句话说，我预计下拉功能将按预期运行，显示相关的子菜单以响应用户交互.然而，尽管实施了修改，但无论点击了哪个下拉切换菜单项，下拉菜单都会同时显示所有子菜单.