Javascript 移动菜单仅在第二次单击时打开，在我滚动时关闭

我用一个子菜单制作了这个简单的响应菜单。但是当我在手机上单击“触发器”时，它不会第一次打开，我必须再次单击它。然后，当我想向下滚动菜单时，它会关闭

HTML:`

    <a href="" class="mobile-trigger">Nav Trigger<span aria-hidden="true"></span></a>

    <div class="nav-main__inner">
    <nav class="nav-main__top cf">
      <ul class="nav-main__left">
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
      </ul>
      <ul class="nav-main__right">
        <li class="nav-main__item"><a class="item__link item__link--medium" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--medium" href="">Link</a></li>
        <li class="nav-main__item has-submenu"><a class="item__link item__link--medium" href="">Link</a>
          <ul class="submenu">
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
          </ul>
        </li>
      </ul>

  </nav>`

`

Javascript：

 $(document).ready(function(){

var trigger  = $('.mobile-trigger');
var subm     = $('.submenu');
var navInner = $('.nav-main__inner');

function mmenu(){
 var wi = $(window).width();

 if(wi < 992) {

  trigger.on('click', function(e){
    e.preventDefault();
    trigger.toggleClass('nav-open');
    navInner.toggleClass('show');

    if (subm.hasClass('show')) {
      subm.removeClass('show');
    }
  });

  $('.has-submenu > a').on('click', function(e){
    e.preventDefault();
    subm.toggleClass('show');
  });

}

$(window).resize(function(){
    navInner.removeClass('show');
    trigger.removeClass('nav-open');
});

}

mmenu();


});`

$（文档）.ready（函数（）{
var trigger=$（'.mobile trigger'）；
var subm=$（'.submenu'）；
var navInner=$（'.nav-main_uuu-inner'）；
函数mmenu（）{
var wi=$（window.width（）；
如果（wi<992）{
在（'click'，函数（e）上触发{
e、 预防默认值（）；
触发器。切换类（'nav-open'）；
navInner.toggleClass（“显示”）；
if（subm.hasClass（'show'））{
子M.removeClass（“显示”）；
}
});
$（'.has子菜单>a'）。在（'click'，函数（e）{
e、 预防默认值（）；
子M.toggleClass（“显示”）；
});
}
$（窗口）。调整大小（函数（）{
navInner.removeClass（“显示”）；
触发器。removeClass（'nav-open'）；
});
}
mmenu（）；
});`

页面加载过程中会出现

窗口。调整大小

事件。它将在您的

document.ready

JQuery函数之外启动。因此，此代码将在页面首次加载时运行：

navInner.removeClass('show');
trigger.removeClass('nav-open');

---

如果您想根据视口大小或设备方向显示/隐藏某些页面元素，请使用。

FYI-

窗口。在初始页面加载过程中会触发resize

。因此，我想在这里做些更改？？删除

preventDefault（）

@arias\u JC无法删除preventDefault（）不会work@ScottMarcus如果我删除了窗口。调整大小都很好，但是如果窗口调整了大小或者手机方向改变了，我该如何关闭菜单呢？