Changeset 55124

Timestamp:

01/24/2023 12:56:13 PM (20 months ago)

Author:

audrasjb

Message:

Twenty Twenty-One: Refine primary-navigation.js behavior for anchor links.

This changeset fixes a bug where clicking on an anchor link in the content changes the state of the button that opens and closes the responsive menu. It adds a conditional to check if the clicked anchor link is inside the primary navigation menu (#site-navigation), in order to prevent content anchor links from changing the state of the button.

Known limitations: The state of the button is not reset when the browser is resized. If a menu anchor link is first clicked while on desktop width, and the browser width is reduced, the menu button will show the text "Close" even though the menu is not opened.

Props andreaboe, sabernhardt, poena, afercia, chaion07, cu121, mukesh27.
Fixes #53331.

File:

• trunk/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js (modified) (1 diff)

trunk/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js

@@ -173 +173 @@
          * @since Twenty Twenty-One 1.1
          */
-        document.addEventListener( 'click', function( event ) {
+        document.getElementById( 'site-navigation' ).addEventListener( 'click', function( event ) {
             // If target onclick is <a> with # within the href attribute
-            if ( event.target.hash && event.target.hash.includes( '#' ) ) {
+            if ( event.target.hash ) {
                 wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );
                 twentytwentyoneToggleAriaExpanded( mobileButton );