菜单没有关闭锚标签

Posted 2023-05-08

【中文标题】菜单没有关闭锚标签

【英文标题】：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>

【参考方案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/…