我知道这里也存在类似的问题:
不透明度:0(不可见)的CSS3元素响应鼠标事件
但这个问题不一样。
我正在尝试使用jQuery实现移动设备的汉堡包导航菜单，这里提到的CSS: Demo.
这基本上有效，但有一个问题。在上面的演示中，他们隐藏了一个导航div，该div通过设置opacity:0被固定在顶部(top:0;left:0)。虽然在上面的演示中这工作得很完美，但当我实现它时，隐藏的div响应点击并从页面导航出去。
我不明白这个在上面的演示中是如何被禁用的(仔细检查了css/js文件，但没有线索)。还有人知道吗?由于我在SharePoint中尝试了这个功能，所以我真的无法进行调试。我只需要了解他们如何禁用点击事件，即使使用opacity:0，所以我可以复制它。谢谢。
您可以(至少)做两件事。你可以使用display: none;或visibility: hidden;来代替opacity: 0;，或者你可以使用jQuery中的preventDefault函数来阻止菜单项被点击。
preventDefault的工作方式如下:
$("#hamburger").click(function(e){
if ($(this).css('opacity')==0) e.preventDefault();
});
感谢Popnoodles为上面的代码(隐藏div中可点击的链接时，不透明度为0)
编辑:我可能误解了你的问题，因为我现在使汉堡包图标不可点击，而我认为你认为导航菜单需要被制作成不可点击，对吗?应该是这样的:
$('a[class="nav-link"]').click(function(e){
if ($(nav).css('opacity')==0) e.preventDefault();
});
在导航菜单的链接中添加nav-link类
他们使用的实现是使用z-index属性来改变用户鼠标将引用的访问层。这意味着具有较低z-index的元素将位于具有较高z-index的元素的下层。注意z-index的默认值是1。只要给nav元素z-index:-1;和内容层z-index:1或更高就可以实现正确的反应。