使用Bootstrap 3下拉菜单作为上下文菜单 [英] Use Bootstrap 3 dropdown menu as context menu

问题描述

如何使用Bootstrap 3，如何将下拉菜单置于光标处并从代码中打开它?

Using Bootstrap 3, how can I place the dropdown menu at the cursor and open it from code?

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

I need to use it on a table as a context menu for its rows.

推荐答案

有可能.我为您提供了一个工作示例，为您提供了良好的开端.

It is possible. I made you a working demo to give a good start.

工作演示 (右键单击任何表行以在动作)

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

First create your dropdown menu, hide it and change its position to absolute:

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

然后将contextmenu事件绑定到表行，以便显示下拉菜单/上下文菜单并将其定位在光标处:

Then bind a contextmenu event to your table rows so it shows dropdown/context menu and position it at the cursor:

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();
});

这篇关于使用Bootstrap 3下拉菜单作为上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！