无法点击 div 下面的元素答案

【问题标题】：Can't click elements below div无法点击 div 下面的元素
【发布时间】：2019-03-10 13:12:39
【问题描述】：

我正在用 css 和 jquery 制作一个简单的菜单。它很好用，但是当我打开它时，我无法单击下面的元素。

<header> 
<nav>
    <span>
        <img src="img/header.png" alt="logo">
        <i class="fas fa-bars trigger">menu</i>
    </span>
    <span class="menu-container hidden">
        <div class="menu">
            <a href="#">option</a>
            <a href="#">option</a>
            <a href="#">option</a>
            <a href="#">option</a>
        </div>
    </span>
</nav>

<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>

JQUERY 基本上是一个在 div 位置之间移动的类切换

const menu = document.querySelector('.menu');
const trigger = document.querySelector('.trigger');

function toggle() {
  menu.classList.toggle('menu--open');
}

trigger.addEventListener('click', toggle);

我的 CSS。动画是用纯 CSS 制作的。单击菜单按钮时，我正在移动 div。

.menu {
  position: relative;
  top: -300px;
  transition: 0.3s all;
}

.menu--open {
  top: 0;
 transition: 0.3s all;
}

nav {
    width: 100%;
    height: 70px;
    position: absolute;
    z-index: 1;
    top: 0;
}

nav span {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav span:nth-child(1) {
    background: white;
    z-index: 1;
    position: relative;
}

 .menu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fa-bars {
    margin-right: 20px;
    font-size: 20px;
}

.fa-bars:hover {
    cursor: pointer;
}

span .menu {
    background: #95baa8;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

span .menu a {
    padding: 15px;
    text-decoration: none;
    color: white;
}

【问题讨论】：

这些选项隐藏在<nav> 标签下。该元素具有 1 的 z-index 和绝对定位，因此它基本上位于前两个链接的顶部
请在问题中包含您的代码。
edit 您的问题：点击<> 图标。然后您可以将完整代码粘贴到“sn-p”中。它只链接jsfiddle，但在本地运行并嵌入问题中。这使用户更容易，他们会更倾向于帮助你。此外，如果 jsfiddle 变得无法访问，那么这个问题对未来的访问者将毫无用处，从而降低了 SO 的质量。此外，在（大多数）问题中包含 MVE 也是一项政策。在帮助中心，您可以阅读“如何创建最小可行示例”以供将来参考。如果你愿意，也可以有一个 js fiddle 的链接。

标签： javascript jquery html css

【解决方案1】：

链接实际上被标题“覆盖”。您可以使用 CSS property pointer-events: none 来解决这个问题。已回复here.

【讨论】：

设置pointer-events:auto中的a元素和pointer-events:none中的菜单容器修复它。谢谢。

【解决方案2】：

用div 重新标记span 项目。 https://jsfiddle.net/ug28sbkr/

【讨论】：