Question

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

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

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

目前，这是允许我使用当前菜单功能的脚本（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片段。

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

祝你好运。

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

2 个答案: