I'm using Underscores as my base theme for a site, and I really dig that it includes a workable mobile navigation element as a part of the theme. But this is essentially a one-page site, and the navigation doesn't "de"-toggle when a link is clicked... because it's not leaving the page.
So I wrote a little script.
The php-generated-HTML is essentially this (simplified for this post):
<nav id="site-navigation" class="main-navigation toggled" role="navigation">
<button class="menu-toggle" aria-controls="mobile-menu" aria-expanded="true"><i class="fa-bars fa"></i></button>
<div class="menu-main-nav-container">
<ul id="primary-menu" class="menu nav-menu" aria-expanded="true">
<li class="menu-item"><a href="LINK">Link 1</a></li>
<li class="menu-item"><a href="LINK#anchor-on-the-page">Link 2</a></li>
<li class="menu-item"><a href="LINK#different-anchor-on-the-page">Link 3</a></li>
</ul>
</div>
</nav>
And here is the script I wrote:
<script type="text/javascript">
$('.main-navigation.toggled li.menu-item a').mouseup(function(){
$('.main-navigation.toggled').removeClass('toggled');
$("button").attr("aria-expanded","false");
$("#primary-menu").attr("aria-expanded","false");
});
</script>
I'm sure there's something obvious I'm overlooking, but I don't see it.
OK. Here's what it was, and I don't know why, but when I removed '.main-navigation.toggled'
it worked. Doesn't make sense to me because those classes are definitely there, but I also don't care ... because it worked. :)
Thanks for your help, folks!