如何使用JavaScript实现选中汉堡菜单选项后自动关闭菜单

问题原因 #

现有代码仅监听了汉堡图标的点击事件来切换菜单状态，没有绑定菜单内导航选项的点击事件，点击选项时不会触发菜单收起逻辑，所以菜单会保持打开状态。

修复代码 #

在原有代码基础上新增导航链接的点击事件即可，完整代码如下：

$('.js--nav-icon').click(function() {  
  var nav = $('.js--main-nav');  
  var icon = $('.js--nav-icon ion-icon');  
  nav.slideToggle(200);  
  icon.attr('name', icon.attr('name') === 'menu-outline' ? 'close-outline' : 'menu-outline');
});

// 新增导航项点击收起逻辑
$('.js--main-nav a').click(function() {
  var nav = $('.js--main-nav');  
  var icon = $('.js--nav-icon ion-icon');
  // 仅菜单处于展开状态时触发收起操作
  if (nav.is(':visible')) {
    nav.slideToggle(200);
    icon.attr('name', 'menu-outline');
  }
});

如果你的导航是锚点跳转类的单页交互，上述代码可以直接生效；如果是跨页跳转的普通链接，页面会自动重载，也可以去掉可见性判断直接执行收起逻辑。

内容的提问来源于stack exchange，提问作者Sebweb