导航 - 单击或滚动关闭

Question

我有一个看起来像

的导航

.navigation-container
  %section.navigation
    .container
      %nav
       %a.item .toggle
       %a.item
       %a.item

目前我正在使用Jquery来打开/关闭它。

  $('.toggle').click(function toggleMobileNav(e) {
    e.preventDefault();
    $(this).parents('.navigation').toggleClass('is-showing');
  });

我添加了从切换到.addClass并在$（'。navigation .item'）上添加.removeClass但是当它关​​闭导航时我必须双击切换以将其打开备份。

我还尝试通过执行类似

的操作来删除.toggleClass（因为它已被弃用？）

  $('.toggle').click(function () {
    if ($('.navigation').hasClass('is-showing')) {
      $('.navigation').removeClass('is-showing');
      $('.navigation .item:not(:first)').removeClass('is-showing');
    } else {
      $('.navigation').addClass('is-showing');
    }
  });

但我的JS技能不是很好，而且也不起作用。

我的第二个问题是我需要在滚动时关闭导航，或者只需点击导航外的任何地方。我认为第二种选择更容易。