如何在菜单项单击时隐藏菜单？

Question

我对 jQuery 不太熟悉，所以无法实现我想要的相当简单的效果。

Live Test Site

所以，我为我的网站创建了一个响应式菜单。如果您调整窗口大小，您将能够看到移动版本。这很好用，除了一件事：

我的菜单中有锚链接，这意味着网站不会在点击时加载新页面，而是向下滚动到锚点。我的问题是，当单击这些菜单项之一时，我不知道如何使菜单自行关闭。

目前，这是允许我使用当前菜单功能的脚本（fa-bars 是汉堡图标，.primary-mobile-nav 是移动 wordpress 导航菜单：

jQuery(document).ready(function($) {
        var pull        = $('.fa-bars');  
            menu        = $('.primary-mobile-nav');  
            menuHeight  = menu.height();  

        $(pull).on('click', function(e) {  
            e.preventDefault();  
            menu.slideToggle();  
        });
})
jQuery(window).resize(function(){  
    var w = $(window).width();  
    if(w > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});

我想总结一下，我的问题是：如何添加到脚本中，以便当我单击任何菜单项时菜单再次隐藏？

编辑

所以我实际上设法通过添加另一个我称为“pullback”的变量并将其分配给“menu-item a”来解决这个问题，然后我只是这样调用函数：

$(pullback).on('click', function(e) {  
    e.preventDefault();  
    menu.slideToggle();  
});

我会看看我在这里得到的其他答案，看看这些解决方案是否更好:)

Answer 1

//When we click on a menu item
$('#menu-mobile-navigation li').click(function(){
   //Hide the menu 
   $('.primary-mobile-nav').hide();

});

希望对你有帮助

Answer 2

试试这个 jQuery sn-p out。

$("#menu-mobile-navigation a").each(function(){
  $(this).click(function(){
    menu.slideToggle();
  });
});

祝你好运。