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

Question

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

具有不透明度的CSS3元素:0(不可见)响应鼠标事件

但这个问题是不同的.

我正在尝试使用jQuery,如下所述的CSS实现移动设备的汉堡导航菜单:Demo.

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

我不明白在上面的演示中如何禁用它(双重检查了css/js文件,但没有线索).有没有其他人有想法？我不能真正提出一个小提琴,因为我在SharePoint中尝试这个并且它在小提琴中起作用.我只需要了解他们如何禁用点击事件,即使在使用时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致记(当不透明度为0时隐藏div内的可点击链接)

编辑:我可能误解了你的问题,因为我现在正在使汉堡包图标无法点击,而我认为导航菜单需要无法点击,对吧？

这应该是这样的:

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

将类添加nav-link到导航菜单中的链接.