Twenty Seventeen: Menu toggle doesn't work after adding a new menu item in customizer

[ocean90]

If you add a new menu item the mobile "Menu" button doesn't toggle the menu anymore. See attached screencast.

I found this in Twenty Fifteen, see [33491] and [32807], but not in Twenty Sixteen where it's working too.

[westonruter]

@ocean90 it works in Twenty Sixteen without that JS snippet because Twenty Sixteen handles the dropdowns with pure CSS. There's no need to re-attach any event listeners.

[afercia]

About this line in navigation.js:

$( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' );

1. not sure why this is passed as context, since this is the clicked button
2. I'd just declare and get the main navigation element earlier in the function

Couple line below:

$( this )
	.add( siteNavigation )
	.attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );

I'm not sure there's the need to set aria-expanded also on the siteNavigation, that's the menu <ul> element that is not focusable or directly available to assistive technologies so aria-expanded seems a bit pointless to me.

As a general consideration for navigation.js, not sure why there are two IIFEs nested within the main one.

[laurelfulford]

In 38992.patch​, I applied @afercia's suggestion of simplifying the line $( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' );, which also appears to fix the reported issue with the menu toggle.

[davidakennedy]

I tested this, and it works well and fixes the issue. Should be good to go.

[davidakennedy]

In 39419:

Twenty Seventeen: Fix broken menu toggle in Customizer after menu items are added

This simplifies the line $( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' ); to $( siteNavContain ).toggleClass( 'toggled-on' );, since this is the clicked button, so the extra context isn't needed.

Props afercia, laurelfulford.

Fixes #38992.

[helen]

In 39423:

Twenty Seventeen: Fix broken menu toggle in Customizer after menu items are added

This simplifies the line $( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' ); to $( siteNavContain ).toggleClass( 'toggled-on' );, since this is the clicked button, so the extra context isn't needed.

Props afercia, laurelfulford.

Fixes #38992 for the 4.7 branch.