jQuery + 整页 + 移动菜单关闭 =无法阻止被动事件侦听器中的默认设置

Question

我遇到了无法关闭移动导航菜单的问题。

我的前端使用 jQuery Full Page。我的移动菜单在点击时打开：

<nav class="menu col-xs-4 pull-right">
  <a href="#">
    <span>Menu</span>
    <button>
      <span>toggle menu</span>
    </button>
  </a>
</nav>

使用 jQuery 代码：

$('nav, .mobile-menu--close').click(function(e){
    $('body').toggleClass('menu-open');
});

但它对关闭 .mobile-menu--close 没有任何作用

<a href="#" class="mobile-menu--close">
  <span>Close</span>
  <span class="mobile-menu--close-x"></span>
</a>

它在 main 之外的 aside 元素里面

    ...        
    <div class="background-image landing-mantas col-xs-8 pull-right">
        </div>
      </div>
    </div>
  </main>
  <aside class="mobile-menu">
    <ul>
      <li>
        <a href="#">Homepage</a>
      </li>
      <li>...

移动端打开时 class 它转换 X 100% 并将 aside.mobile-menu 从 X100% 变为 0%。所以基本上它用位置交换这些。

我已经阅读了有关禁用触摸操作的答案：none 等等。似乎没有任何帮助。

可以找到 Web 的完整预览here

请记住，这是 wop，因此请在响应式视图中查看它以了解要点。但它应该可以解决问题。

Answer 1

删除此样式并尝试

   .mobile-menu {
         z-index: -1; 
    }

Answer 2

从您提供的 link 可以看出。当应用菜单打开时，您的导航不可点击，因此您需要将菜单打开的 z-index 设置为高于内容的 z-index（我假设页面在内容中class) -

.menu-open{
 z-index: 1111;
}
.content{
z-index: 1000;
}

jQuery + 整页 + 移动菜单关闭 =无法阻止被动事件侦听器中的默认设置

jQuery + Full Page + Mobile Menu closing =Unable to preventDefault inside passive event listener

javascript

css

jquery

touch

fullpage.js