如何使不透明度为 0 的元素不可点击

Question

我知道这里存在类似的问题：

CSS3 Element with Opacity:0 (invisible) responds to mouse events

但是这个问题不一样

我正在尝试使用 jQuery、CSS 为移动设备实现汉堡包导航菜单，如下所述：Demo.

这主要有效，但有一个问题。在上面的演示中，他们通过设置 opacity:0 隐藏了固定在顶部 (top:0;left:0) 的导航 div。虽然在上面的演示中效果很好，但当我实现它时，隐藏的 div 会响应点击并离开页面。

我不明白上面的演示是如何禁用它的（仔细检查了 css / js 文件，但没有任何线索）。还有其他人有想法吗？我无法真正提出 fiddle，因为我正在 SharePoint 中尝试此操作，并且在 fiddle 中它有效。我只需要了解他们是如何在使用 opacity:0 时禁用点击事件的，这样我就可以复制它。谢谢。

Answer 1

您（至少）可以做两件事。您可以使用 display: none; 或 visibility: hidden; 而不是 opacity: 0;，或者您可以使用 jQuery.

中的 preventDefault 函数阻止菜单项被点击

preventDefault 会像这样工作：

$("#hamburger").click(function(e){
  if ($(this).css('opacity')==0) e.preventDefault();
});

以上代码归功于 Popnoodles (Hide clickable links inside div when opacity is 0)

编辑：我可能误解了你的问题，因为我现在让汉堡包图标不可点击，而我认为你提到导航菜单需要不可点击，对吗？

应该像这样工作：

$('a[class="nav-link"]').click(function(e){
  if ($(nav).css('opacity')==0) e.preventDefault();
});

将 class nav-link 添加到导航菜单中的链接。

Answer 2

他们使用的实现是使用 z-index 属性来更改用户鼠标将引用的访问层。这意味着具有较低 z-index 的元素将位于具有较高 z-index 的元素的下层。请注意，z-index 的默认值为 1。只需为导航元素提供 z-index:-1; 和内容层 z-index:1 或更高级别即可实现正确的反应。

如何使不透明度为 0 的元素不可点击

How to make an element with opacity 0 unclickable

jquery

html

css

hamburger-menu