mmenu没有在锚标签上关闭 [英] mmenu not closing on anchor tags

问题描述

尝试使用jQuery.mmenu插件.我的菜单中有多个项目.一些链接到页面内的锚标记，其余链接到其他页面.第一次单击指向锚点的链接时，页面导航到锚点，菜单关闭.但是，如果我再次打开菜单并单击另一个指向不同锚点的链接，则页面会导航，但菜单不会关闭.我使用的是开箱即​​用的代码，并且没有做任何更改.我确定我缺少真正简单的东西.任何帮助将不胜感激

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

菜单

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

推荐答案

首先，我将摆脱那些页面锚中的index.html.所以；

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>

mmenu可能已经更新了页面链接，但是当我最近进行更新时，开箱即用"意味着使用此代码(在演示代码示例之一-onepage.html中)

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
                    );  
                }
            );                      
        }
    }
);

使用if ( href.slice( 0, 1 ) == '#' )来确定链接是锚还是指向另一个页面的链接.因此，我建议删除这些链接中的index.html的原因.

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.

这篇关于mmenu没有在锚标签上关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！