【问题标题】:mmenu not closing on anchor tags菜单没有关闭锚标签
【发布时间】:2014-07-18 03:28:58
【问题描述】:

尝试使用 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>

【问题讨论】:

    标签: mmenu


    【解决方案1】:

    现在已内置在插件中 (v5.6.6 2016.07.05)。要正确支持带 #text 的 href(例如,在单页应用程序中),请在激活插件时使用以下选项:

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

    如:

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

    【讨论】:

      【解决方案2】:

      首先,我会去掉那些页面锚点中的 index.html。所以;

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

      也许 mmenu 已针对页面链接进行了更新,但当我最近这样做时,“开箱即用”意味着使用此代码(它位于演示代码示例之一 - 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。

      【讨论】:

      • 太好了。完美运行。非常感谢你的解决方案。我想我从错误的例子中提取了 js
      • @masterShake - 太好了,很高兴它奏效了。如果给出的解决方案解决了您的问题,您应该将答案标记为正确。 meta.stackexchange.com/questions/5234/…
      猜你喜欢
      • 1970-01-01
      • 2020-07-05
      • 1970-01-01
      • 2013-05-29
      • 1970-01-01
      • 2014-03-11
      • 2011-03-09
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多