Question

对于移动粘性菜单，我使用以下代码（缩短）：

<nav class="navigation--wrapper">
    <div class="navigation">
        <div class="navigation--hamburger js--hamburger">
            <svg>
                ...
            </svg>
        </div>
    </div>
    <div class="navigation--mobile is-content-menu js--mobile-navigation">
        ...
    </div>
</nav>

使用以下（缩短的）CSS样式：

.navigation--wrapper {
    width: 100%;
    position: fixed;
    z-index: 20;
    top: 0;
}

.navigation {
    height: 50px;
}

.navigation--hamburger {
    float: left;
    padding: 14px;
}

.navigation--mobile {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
}

.navigation--mobile.is-open {
    visibility: visible;
    opacity: 1;
}

我在div中添加了一个事件监听器，用于包裹汉堡包图标（js--hamburger），通过将is-open类添加到js--mobile-navigation来切换菜单。这在大多数情况下都能正常工作，但在随机点击次数后，该按钮会停止工作。

我为文档中的所有点击添加了一个事件监听器，并将目标记录到控制台：

jQuery(document).click(function(event) {
    return console.log(event.target);
});

现在，对于菜单出现的点击，它总是显示svg的一部分作为目标，这很好。点击几次后（随机，有时也是第一次）菜单不起作用，类js--mobile-navigation的div显示为目标，菜单停止工作，直到我重新加载页面。

我认为这必定是固定位置元素的错误。在桌面设备，平板电脑和移动设备上的所有主流浏览器中都会出现此问题。

固定定位DIV中的元素无法随机点击

0 个答案: