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

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

---

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

这是可能的。我给你做了一个工作演示来给你一个好的开始

（右键单击任何表格行以查看其实际操作）

首先创建下拉菜单，将其隐藏并将其

位置更改为
绝对
：

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

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

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

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

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

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

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

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

我只是想再多提几条建议来改进这个好答案。

下面是一个关于如何向任何html元素添加上下文菜单的演练

标记：
首先，让我们从中添加一个菜单。将其添加到HTML的任何位置，最好是在正文的根级别。
下拉菜单
类将设置
显示：无
，因此它最初是不可见的。

应该是这样的：


插件模板：
基于，我们将使用一个名称空间，这样就不会弄乱全局名称空间。由于我们对jQuery有依赖关系，并且需要访问窗口，所以我们将把它们作为变量传递进来，这样我们就可以在缩小过程中生存下来。它将如下所示：

（函数（$，窗口）{
$.fn.contextMenu=函数（设置）{
返回此.each（函数（）{
//代码在这里
}  
};
})（jQuery，窗口）；

好的，不再使用管道。下面是函数的主要部分：
处理右键单击事件：
我们将在调用扩展名的对象上处理鼠标事件。当事件触发时，我们将抓取在开头添加的下拉菜单。我们将使用初始化函数时设置传入的选择器字符串来定位它。我们将通过执行以下操作来修改菜单：


我们将获取
e.target
属性，并将其存储为名为
invokedOn
的数据属性，以便稍后识别引发上下文菜单的元素
我们将使用
.show（）
我们将使用
.css（）
定位元素。

我们需要确保它的
位置
设置为
绝对
然后，我们将使用事件的
pageX
和
pageY
属性设置左侧和顶部位置

最后，为了防止右键单击操作打开它自己的菜单，我们将
返回false
，以阻止javascript处理任何其他内容

它将如下所示：

$（this）.on（“上下文菜单”，函数（e）{
$（settings.menuSelector）
.data（“invokedOn”，$（e.target））
.show（）
.css({
位置：“绝对”，
左：e.pageX，
顶部：e.pageY
});
返回false；
});

修复菜单边缘情况：
这将在打开菜单的光标的右下角打开菜单。但是，如果光标位于，菜单应向左打开。同样，如果光标位于底部，菜单应向顶部打开。区分包含物理框架的和
文档的底部也很重要de>表示整个HTMLDOM，可以滚动到远远超过窗口的位置

为此，我们将使用以下函数设置位置：

我们这样称呼他们：

.css({
左：getMenuPosition（e.clientX，'width'，'scrollLeft'），
顶部：getMenuPosition（例如clientY、'height、'scrollTop'）
});

将调用此函数以返回适当的位置：

函数getMenuPosition（鼠标、方向、滚动方向）{
var win=$（窗口）[方向]（），
滚动=$（窗口）[scrollDir]（），
menu=$（settings.menuSelector）[方向]（），
位置=鼠标+滚动；
//打开菜单会经过页面的侧面
如果（鼠标+菜单>赢&菜单<鼠标）
位置-=菜单；
返回位置
}

在菜单元素上绑定单击事件：
显示上下文菜单后，我们需要添加事件处理程序以侦听其上的单击事件。我们将删除可能已添加的任何其他绑定，以便不会触发同一事件两次。这些事件可以在打开菜单时发生，但由于单击“关”而未选择任何内容。然后我们可以在取消>单击事件，我们将在下一节中处理逻辑

同样，我们不想在菜单项之外的任何地方注册单击，因此我们通过将选择器传递到
on
函数中来设置，该函数将“过滤触发事件的选定元素的后代”

到目前为止，函数应如下所示：

$（settings.menuSelector）
.off（'单击'）
.on（‘单击’、‘a’、函数（e）{
//下一节的代码在这里
});

处理菜单点击
一旦我们知道菜单上发生了单击，我们将执行以下操作：使用
.hide（）从屏幕上隐藏菜单
。接下来，我们要保存最初调用菜单的元素以及当前菜单中的选择。最后，我们将启动传递到扩展中的函数选项，方法是在属性上使用，并将事件目标作为参数传递

$menu.hide（）；
var$invokedOn=$menu.data（“invokedOn”）；
变量$selectedMenu=$（e.target）；
settings.menuSelected.call（$（this），$invokedOn，$selectedMenu）；

单击“关闭”时隐藏：
最后，与大多数上下文菜单一样，我们希望在用户单击关闭菜单时关闭该菜单。为此，我们将侦听正文上的任何单击事件，如果上下文菜单是这样打开的，则关闭该菜单：

$（'body'）。单击（函数（）{
$（settings.menuSelector）