JS覆盖菜单不显示

Question

我想在我的网页左上角显示this全屏叠加菜单（效果很好）。到目前为止我的代码可以看到here。

当我点击叠加菜单时，它似乎是隐藏的＆＃39;主页内容背后。

我更改了叠加菜单的一些z-index值，但是当我这样做时，主页面导航（称为slick-dots的元素）停止工作（可见但不可点击）。

当叠加菜单打开时，应隐藏导航（slick-dots）。但是，当关闭全屏菜单时，导航应该是可见的并且可以正常工作。

我不确定如何配置z-index或position值以达到我想要的效果？

对此有任何帮助将不胜感激。

Answer 1

使用您提到的z-index解决方案，您无法点击光滑点导航，因为当您使用visibility: hidden而不是display: none时，该元素仍然存在，占用空间其他一切，拦截鼠标事件。您可以pointer-events: none与visibility一起使用，以便让悬停和点击通过它。

.nav {
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
}

body.nav-active .nav {
  visibility: visible;
  pointer-events: auto;
}

Here's a Pen of it working. pointer-events仅适用于IE11，因此如果您需要支持IE10，则必须添加某种解决方法。