How to ensure dropdown menu closes automatically when transitioning to a new page in WordPress

Other Questions Wordpress
1

I’m currently developing a WordPress template that includes a header with a dropdown menu. Users can open the dropdown by clicking an arrow, but it remains open even after they select a link and go to a new page, which is inconvenient. I would like the dropdown to close automatically whenever a new page is loaded. Below is the JavaScript code I’m using for the navigation functionality, although I’m still trying to understand how different parts of this code work:

function initializeDropdownMenu( element ) {
    // Create a button to toggle the dropdown for parent menu items
    element.find( '.parent-item > a' ).after( '<button class="dropdown-btn" aria-expanded="false">' + accessibilityText.expand + '</button>' );

    // Activate buttons and submenus for items that are currently active
    element.find( '.active-parent > button' ).addClass( 'active' );
    element.find( '.active-parent > .submenu' ).addClass( 'visible' );

    element.find( '.dropdown-btn' ).click( function( event ) {
        var currentButton = $( this );
        event.preventDefault();
        currentButton.toggleClass( 'active' );
        currentButton.next( '.submenu' ).toggleClass( 'visible' );
        currentButton.attr( 'aria-expanded', currentButton.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
        currentButton.html( currentButton.html() === accessibilityText.expand ? accessibilityText.collapse : accessibilityText.expand );
    } );
}

initializeDropdownMenu( $( '.navigation-menu' ) );

// Re-initialize the dropdown menu upon updates in the customizer
$( document ).on( 'customize-menu-refresh', function( event, params ) {
    if ( 'main-menu' === params.navigationLocation.position ) {
        initializeDropdownMenu( params.newElement );

        // Sync the expanded states from the old element
        params.oldElement.find( '.dropdown-btn.active' ).each(function() {
            var id = $( this ).parent().prop( 'id' );
            $( params.newElement ).find( '#' + id + ' > .dropdown-btn' ).triggerHandler( 'click' );
        });
    }
});

Can you provide guidance on modifying this code to ensure the dropdown menu collapses when switching pages?

2

Wrap your dropdown reset in its own function and call it from both document ready and page visibility events. Browsers are weird about keeping state these days. Make a resetDropdowns() function, then call it on $(document).ready and $(window).on(‘pageshow’) - pageshow catches back/forward navigation that document ready sometimes misses.

3

This happens because WordPress keeps element states between page loads, especially with caching or when browsers hold onto DOM states. I ran into the same thing building a custom e-commerce theme. Don’t just reset on document ready - bind your reset function to the window beforeunload event. This cleans things up right before navigation:

$(window).on('beforeunload', function() {
  $('.dropdown-btn').removeClass('active').attr('aria-expanded', 'false');
  $('.submenu').removeClass('visible');
  $('.dropdown-btn').html(accessibilityText.expand);
});

Also throw this same reset logic into your click handler for submenu links. When users click navigation links inside the dropdown, trigger the cleanup right away. This covers regular navigation plus edge cases where beforeunload doesn’t fire properly on some browsers or mobile devices.

4

Manual JavaScript fixes work, but you’re fighting the browser’s state management. I’ve hit this same dropdown issue on multiple WordPress sites - event-driven automation handles it way better.

Don’t try catching every navigation event. Set up automated workflows that monitor page transitions and reset dropdowns automatically. Covers everything: regular clicks, back/forward buttons, cached pages, even weird mobile browser stuff.

Bonus: you can extend it later. Want to track which dropdown items get clicked most? Reset other UI elements? Build it into the same workflow without touching WordPress code.

I’ve automated similar UI state management for our company’s apps - rock solid compared to manual JavaScript event handling. No more guessing if you caught every scenario or debugging why dropdowns stick open on certain devices.

5

This is a super common issue with dynamic dropdowns. The browser remembers the dropdown state when you navigate between pages, so you need to reset it on page load. I ran into this exact same thing on a client project last year - adding a simple page load handler fixed it completely.

Add this after your existing initialization:

$(document).ready(function() {
$(‘.dropdown-btn’).removeClass(‘active’);
$(‘.submenu’).removeClass(‘visible’);
$(‘.dropdown-btn’).attr(‘aria-expanded’, ‘false’);
$(‘.dropdown-btn’).html(accessibilityText.expand);
});

Every time a new page loads, this resets all dropdown buttons to closed. It removes the active classes, hides submenus, and resets the ARIA attributes and button text. Clean fix that keeps your existing functionality while solving the persistence problem.