如何使用 jQuery ContextMenu 在 table 中让 2 个不同的菜单一个在另一个之上？

Question

使用 jQuery ContextMenu 插件或纯 Javascript，是否可以使用 2 个不同的上下文菜单（第一个在父元素上，第二个在子元素上)?

在我的代码片段中，我只想在右键单击（在table行上）时打开第一个菜单，然后打开第二个菜单仅在按钮左键单击（在我的行内）。

我只为按钮设置了 trigger: 'left'，但是当我左键单击它时，两个菜单都显示为您在这里看到的：

$(function() { $.contextMenu({ selector: '.context-menu-one', callback: function(key, options) { var m = "clicked: " + key; window.console && console.log(m) || alert(m); }, items: { "edit": {name: "Edit", icon: "edit"}, "cut": {name: "Cut", icon: "cut"}, copy: {name: "Copy", icon: "copy"}, "paste": {name: "Paste", icon: "paste"}, "delete": {name: "Delete", icon: "delete"}, "sep1": "---------", "quit": {name: "Quit", icon: function(){ return 'context-menu-icon context-menu-icon-quit'; }} } }); $.contextMenu({ selector: '.context-menu-two', trigger: 'left', items: { "new": {name: "New", icon: "new"}, "open": {name: "Open", icon: "open"} } }); });

table{width:300px;height:100px} tr {background:#222;color:#fff}

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/> <link href="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.ui.position.js"></script> <script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.js"></script> <table> <tbody> <tr role="row" class="context-menu-one"> <td> <button class="context-menu-two">Left click</button> </td> </tr> </tbody> </table>

有什么方法可以防止点击按钮时显示第一个菜单吗？

第一次更新

根据 Aswin Kumar 的回答，这两个菜单分别正确显示，但是，正如您从我下面的 gif 中看到的那样，如果您尝试：

点击按钮

将鼠标悬停在菜单上

将鼠标移到菜单外

单击鼠标左键关闭菜单

在这种情况下，用户无法关闭菜单（第 4 点）。是否有解决方法可以在菜单外单击鼠标左键关闭菜单？

Answer 1

使用 contextMenu 的 show 事件（可取消）和 jquery 的 hasClass 来验证目标元素。在z-index

的帮助下

更新

4.close点击鼠标左键菜单(fixed)

$(function() {

  $(document).on('mousedown', function(e) {
      $('.context-menu-one').contextMenu('hide');
      $('.context-menu-two').contextMenu('hide');
      e.preventDefault();
      e.stopImmediatePropagation();
  });

  $.contextMenu({
    selector: '.context-menu-one',
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m);
    },
    events: {
      show: function() {
        if ($(event.target).hasClass('context-menu-two')) {
          return false
        }
        $('.context-menu-two').first().contextMenu('hide');
      }
    },
    autoHide: true,
    items: {
      "edit": {
        name: "Edit",
        icon: "edit"
      },
      "cut": {
        name: "Cut",
        icon: "cut"
      },
      copy: {
        name: "Copy",
        icon: "copy"
      },
      "paste": {
        name: "Paste",
        icon: "paste"
      },
      "delete": {
        name: "Delete",
        icon: "delete"
      },
      "sep1": "---------",
      "quit": {
        name: "Quit",
        icon: function() {
          return 'context-menu-icon context-menu-icon-quit';
        }
      }
    }
  });

  $.contextMenu({
    selector: '.context-menu-two',
    trigger: 'left',
    autoHide: true,
    items: {
      "new": {
        name: "New",
        icon: "new"
      },
      "open": {
        name: "Open",
        icon: "open"
      }
    }
  });
});

table {
  width: 300px;
  height: 100px
}

tr {
  background: #222;
  color: #fff
}

.context-menu-two {
  position: relative;
  z-index: 2;
}

.context-menu-root {
  z-index: 3!important;
}

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" />
<link href="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.ui.position.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.js"></script>
<table>
  <tbody>
    <tr role="row" class="context-menu-one">
      <td>
        <button class="context-menu-two">Left click</button>
      </td>
    </tr>
  </tbody>
</table>

如何使用 jQuery ContextMenu 在 table 中让 2 个不同的菜单一个在另一个之上？

How to use jQuery ContextMenu to have 2 different menus one above the other inside a table?

javascript

jquery

contextmenu