WP Bootstrap NavWaker: Dropdown Menu Opens All Dropdown Menus at Once

Question

I'm having difficulty implementing a dropdown menu with Bootstrap and WordPress. I've used filters to add the 'dropdown-toggle-split' class to the link elements of menu items that have submenus. However, after configuring this, the dropdown menu doesn't behave as expected. When I click the first dropdown toggle menu item, all submenus appear, instead of only the submenus of the related menu item. Maybe you can look at this gif:

Explanation:

WordPress Filter Usage: I'm using the nav_menu_link_attributes and nav_menu_item_title filters to modify the attributes and content of link elements on menu items that have submenus. My goal is to add the dropdown-toggle-split class to the link elements and change the HTML structure of these menu elements to fit Bootstrap's requirements. Here is the code:

 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 = '';
        // $args->before .= ''.$item->title.'';
        $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  yang memiliki class visually-hidden
        $title = '' . esc_html__( 'Toggle Dropdown', 'your-text-domain' ) . '';
        // Tambahkan elemen  untuk tautan menu
        $title .= '' . esc_html( $item->title ) . '';
        // Tambahkan div penutup untuk btn-group
        $args->after = '';
    }
    // Kembalikan judul yang telah dimodifikasi
    return $title;
}, 10, 4 );

Because of this code, I get duplicate 'ul dropdown-menu show' with same aria-labelledby="menu-item-dropdown-179".

here is the html elements:


    
        
            Toggle Dropdown
        
        Sample Page
    
    
        
            
                
                    Toggle Dropdown
                
                Sample Page 2
            
            
                
                    
                        Winter Warm-up Sale

And this is my javascript file:

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;

I suspect the issue stems from the duplicate 'dropdown-menu show' elements, but I'm unable to find a solution since WordPress Bootstrap NavWalker automatically generates these elements with incremental numbers. Any assistance in resolving this would be greatly appreciated. Thank you in advance for your help!

I expected that upon clicking the dropdown toggle menu item, only the submenus associated with that specific menu item would appear. In other words, I anticipated that the dropdown functionality would behave as expected, displaying the relevant submenus in response to user interaction. However, despite implementing the modifications, the dropdown menu displayed all submenus simultaneously, regardless of which dropdown toggle menu item was clicked.

emilianoc · Accepted Answer

i try to replicate something similar to your code

$(document).ready(() => {
    $('.main-menu .dropdown-toggle').on('click', function (e) {
      e.preventDefault();
      //#######################################################################
      //##i cannot check this because your html does not have enough elements##
      //#######################################################################
      // Close other dropdown-menus within the same level
      $(this).closest('.menu-item-has-children').
        siblings('.menu-item-has-children').
        find('.dropdown-menu').removeClass('show');
      //###################################################################### 
        
      
      //if you want to use $.toggle() you need to remember that toggle() and toggleClass()
      // are not the same function:
      // $.toggle() use css style 
      //$.toggleClass() add / remove class
      // so if you use $.toggle() you need to check css display and "reset" content on "display=none"
      //=========================================================================================
      var heroBros=$(this).closest('.menu-item-has-children').find('.dropdown-menu');
      var hero=heroBros.first();

      // Toggle class for the clicked dropdown-menu
      hero.toggle('show',function(){
      
        //hide child when hide main=======================
        if($(this).css("display")=='none')heroBros.hide();
        //================================================
        
      });
           
    });

    // 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();
    });
});






    
        
            Toggle Dropdown
        
        Sample Page
    
    
        
            
                
                    Toggle Dropdown
                
                Sample Page 2
            
            
                
                    
                        Winter Warm-up Sale

WP Bootstrap NavWaker: Dropdown Menu Opens All Dropdown Menus at Once

Answers (1)

Related Questions