Collapse/hide mobile nav menu after nav link click

Question

I have got an ajax page load working on my wordpress site with both the official twenty sixteen and storefront themes.

The only hitch is that the mobile nav menu does not close once a link has been clicked and the new page has been fetched and loaded by the ajax script.

I've looked through most of the other similar topics and tried various snippets of jquery but have not been able to get it working.

The code for the menu toggle button on twentysixteen is :

<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>

The menu container html is :

<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-292"><a href="https://example.com/my-account/">My 
 account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-293"><a href="https://example.com/labels/">Labels</a> 
</li></ul>
</div>

From my research into the matter it would seem that there is potentially two ways to achieve what I'm after.

1. Changing the aria attribute on click from expanded="true" to expanded="false" could do the trick?

I found this code snippet but have no idea how I would actually implement

$(function () { 
    $('li').on('click', function (e) {
        var menuItem = $( e.currentTarget );

        if (menuItem.attr( 'aria-expanded') === 'true') {
            $(this).attr( 'aria-expanded', 'false');
        } else {
            $(this).attr( 'aria-expanded', 'true');
        }
    });
});

2. Use a jquery click function to trigger the toggle button.

   $( "#menu-main" ).click(function() { $( "#menu-toggle" ).click(); });

Any help would be greatly appreciated! Thank you!

Answer 1

try this

$(function () { 
   $('#menu-main li>a').on('click', function (e) {
       $( "#menu-toggle" ).click();
   });
});

or

$(function () { 
   $('#menu-main li>a').on('click', function (e) {

       // i set  $(".toggled-on") because i dunno which is your main menu 
       //<div class="menu-main-container">
       // or 
       //<ul id="menu-main" class="primary-menu">

       $(".toggled-on").attr("aria-expanded","false");
       $(".toggled-on").removeClass(".toggled-on");
   });
});