使用 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屋！