Question

我正在使用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;
}

Answer 1

链接实际上是被标题“覆盖”的。您可以使用CSS property pointer-events: none来解决。 here.

已回答

Answer 2

用span重装div项。 https://jsfiddle.net/ug28sbkr/

无法点击div下面的元素

2 个答案: