jquery - z-index 在右键单击时不起作用

Question

我正在尝试实现一个右键单击 div 时出现的上下文菜单，类 contextFolder 具有 z-index: 1000。

为此，我使用 JQuery 将上下文菜单事件绑定(bind)到 div。这工作正常。我希望此上下文菜单在以下情况下消失

• 用户左键点击屏幕上的任意位置，
• 用户右键单击屏幕上除任何其他 div.contextfFolder 之外的任意位置

如果在打开上下文菜单时右键单击其他 div.contextFolder，我希望我当前的上下文菜单消失并在新的 div.contextFolder 上打开一个新菜单。

当我向上下文菜单显示时这样做，

• 我还使用 height: 100%、width: 100% 和 z-index: 100 创建了一个叠加层。
• 我将左键单击事件绑定(bind)到这个叠加层，这样当它被点击时，
  • 覆盖层已移除，
  • 上下文菜单已隐藏。
• 我还将上下文菜单绑定(bind)到 overlay 以隐藏上下文菜单并在右键单击除另一个 div.contextFolder 之外的任何点时删除 overlay
• 为了防止左键单击事件叠加在上下文菜单上，我还将 z-index: 101 分配给上下文菜单。 (叠加层的 z-index 为 100)

这对我来说似乎没问题。(我是 CSS 新手，所以我可能遗漏了一些非常明显的东西)。

一切正常，除了当我右键单击 div.contextFolder 时，当上下文菜单已经在另一个 div.contextFolder 上打开时，它会转到覆盖的上下文菜单事件(隐藏到当前的)。我想打开一个新的。

我已经在最新版本的 Chrome 和 Firefox 中对此进行了测试。

这是 fiddle .

谢谢。

Answer 1

我刚刚为您创建了一个 fiddle 。 我所做的只是修改你的 javascript。

JSFiddle

希望对你有帮助。

PS:我还添加了其他代码来检查菜单初始打开后的点击是否是对菜单子(monad)项的点击

干杯