javascriptphpjquerywordpressunderscores-wp

Wordpress Underscores, toggling class with mouseup doesn't seem to work


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.


Solution

  • 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!