mmenu not closing on anchor tags

问题

trying to use the jQuery.mmenu plugin. I have multiple items in my menu. Some link to anchor tags within the page, and the rest link to other pages. First time I click on a link to an anchor, the page navigates to the anchor and the menu closes. But if I open the menu again and click on another link to a different anchor, the page navigates but the menu does not close. I'm using the code right out of the box and have not changed anything. I'm sure I'm missing something real simple. Any help would be greatly appreciated

The menu

<nav id="menu">
  <ul>
    <li><a href="index.html#how-it-works">How it Works</a></li>
    <li><a href="index.html#businesses">Affiliated Businesses</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="faqs.html">FAQs</a></li>
     <li><a href="contact-us.html">Contact Us</a></li>
    <li><a href="jobs.html">Jobs</a></li>
  </ul>
</nav>

The JS

<script type="text/javascript">
  $(function() {
    $("nav#menu").mmenu({
   classes: "mm-slide"
});
  });
</script>

回答1:

First of all, I would get rid of the index.html in those on-page anchors. So;

<li><a href="#how-it-works">How it Works</a></li>
<li><a href="#businesses">Affiliated Businesses</a></li>

Maybe mmenu has been updated for onpage links but when I did it recently, 'out the box' meant using this code (it's in one of the demo code examples - onepage.html)

var $menu = $('nav#menu'),
    $html = $('html, body');

$menu.mmenu({
  classes: "mm-slide"
});

$menu.find( 'li > a' ).on(
    'click',
    function()
    {
        var href = $(this).attr( 'href' );

        //  if the clicked link is linked to an anchor, scroll the page to that anchor 
        if ( href.slice( 0, 1 ) == '#' )
        {
            $menu.one(
                'closed.mm',
                function()
                {
                    setTimeout(
                        function()
                        {
                            $html.animate({
                                scrollTop: $( href ).offset().top
                            }); 
                        }, 10
                    );  
                }
            );                      
        }
    }
);

Which uses if ( href.slice( 0, 1 ) == '#' ) to determine whether the link is an anchor or a link to another page. Hence the reason I suggest getting rid of the index.html in those links.

回答2:

This is now built into the plugin (v5.6.6 2016.07.05). To properly support href with #text (for example, in a single page app) use the following options when activating the plugin:

onClick : {
  close          : true,
  preventDefault : false,
}

As in:

$("#my-menu").mmenu({
  "slidingSubmenus": false,
  onClick : {
    close          : true,
    preventDefault : false,
  }
});

来源：https://stackoverflow.com/questions/23919555/mmenu-not-closing-on-anchor-tags