Question

我遇到的问题是，当我切换响应式菜单时，我希望它在单击链接时菜单消失。有什么建议或帮助吗？这是JSFiddle

以下是HTML标记

<header>
  <div class="logo-container">
    <button id="mobile-menu" class="menu-btn">
      <i>=</i>
    </button>
  </div>

  <nav class="navigation">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT ME</a></li>
      <li><a href="#">MY WORK</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

以下是JQuery：

var menu = $('.navigation ul'), plink = $('#mobile-menu'), go;

function mobileMenu() {
    var ww = $(window).width();

    if (ww>769 && go) { //hide this menu on desktop
        if (menu.is(':hidden')) {
            menu.removeAttr('style');
        }

        plink.unbind();
        go=false;
    }

    else if (ww<768 && !go) { //reveal this menu on small screen
        plink.on('click', function(e) {
            e.preventDefault();
            menu.toggle();
            e.stopPropagation();
        });

        go=true;
    }
}

mobileMenu();

Answer 1

您可以为菜单项目添加点击事件处理程序（使用某些类以便于操作），然后在处理程序中再次切换菜单。

$('.navigation > ul > li').on('click', function(){
    menu.toggle();
});

您可以为小屏幕附加事件并将其解除绑定（作为您的其他逻辑）

实际上，如果您的菜单链接指向另一个页面，并且在此页面中您默认折叠了相同的菜单，那么您没有问题。

更新了fiddle

编辑：JSFiddle demo根据评论处理窗口调整大小事件

单击链接后隐藏响应式导航

1 个答案: