Question

尝试使用jQuery.mmenu插件。我的菜单中有多个项目。一些链接到页面中的锚标签，其余链接到其他页面。我第一次点击锚点的链接，页面导航到锚点，菜单关闭。但是，如果我再次打开菜单并单击指向其他锚点的其他链接，页面将导航，但菜单不会关闭。我使用开箱即用的代码并没有改变任何东西。我确定我错过了一些简单的东西。任何帮助将不胜感激

菜单

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

JS

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

Answer 1

现在内置于插件中（v5.6.6 2016.07.05）。要使用#text正确支持href（例如，在单页面应用程序中），请在激活插件时使用以下选项：

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

如：

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

Answer 2

首先，我会删除那些页面锚点中的index.html。所以;

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

也许mmenu已经针对页面链接进行了更新，但是当我最近这样做时，＆＃39;开箱即用。意味着使用此代码（它在一个演示代码示例中 - 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
                    );  
                }
            );                      
        }
    }
);

使用if ( href.slice( 0, 1 ) == '#' )来确定链接是锚点还是指向其他页面的链接。因此我建议在这些链接中删除index.html。

mmenu没有关闭锚标签

2 个答案: