4

我知道这里有一个类似的问题：

不透明度：0（不可见）的 CSS3 元素响应鼠标事件

但这个问题是不同的。

我正在尝试使用此处提到的 jQuery、CSS 为移动设备实现汉堡导航菜单：Demo。

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

我不明白在上面的演示中这是如何被禁用的（仔细检查了 css / js 文件但没有线索）。其他人有想法吗？我真的不能摆弄小提琴，因为我在 SharePoint 中尝试这个并且在小提琴中它可以工作。我只需要了解他们如何在使用时禁用点击事件，opacity:0以便我可以复制它。谢谢。

4

2 回答 2

5

您可以（至少）做两件事。您可以使用display: none;orvisibility: 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到导航菜单中的链接。

于 2015-10-10T12:30:22.363 回答
3

他们使用的实现是使用 z-index 属性来更改用户鼠标将引用的访问层。这意味着具有较低 z-index 的元素将位于具有较高 z-index 的元素的下层。请注意，z-index 的默认值为 1。只需给 nav 元素z-index:-1;和内容层z-index:1或更高以实现适当的反应。

于 2015-10-10T14:33:45.793 回答