jquery - 使用 Bootstrap 3 下拉菜单作为上下文菜单

Question

使用 Bootstrap 3，如何将下拉菜单放在光标处并从代码中打开它？

我需要在表上使用它作为其行的上下文菜单。

Answer 1

有可能的。我为您制作了一个工作演示，以提供一个良好的开端。

Working demo (右键单击任何表格行以查看其运行情况)

首先创建您的下拉菜单，将其隐藏并更改其 position至 absolute :

#contextMenu {
  position: absolute;
  display:none;
}

然后绑定(bind)一个contextmenu事件到您的表行，以便它显示下拉/上下文菜单并将其放置在光标处:

var $contextMenu = $("#contextMenu");

$("body").on("contextmenu", "table tr", function(e) {
   $contextMenu.css({
      display: "block",
      left: e.pageX,
      top: e.pageY
   });
   return false;
});

然后当用户选择一个选项隐藏下拉/上下文菜单时:

$contextMenu.on("click", "a", function() {
   $contextMenu.hide();
});