微客导航 » 文章资讯 » 详解bootstrap用dropdown-menu实现上下文菜单

详解bootstrap用dropdown-menu实现上下文菜单

2023-09-24 07:10:06 215

详解bootstrap用dropdown-menu实现上下文菜单

写在前面：

所谓上下文菜单，它与一般菜单的区别在于：

通过右键触发显示在鼠标右键点击处

鼠标在别处点击后，该菜单消失

实现方法：

在html中定义一个普通的没有触发条件的dropdown-menu，然后写这个menu的父容器的监听即可实现。

代码：



任务指派
任务监听
任务表单

...

$("#settingInGraph").mousedown(function(e){
if(3==e.which){
document.oncontextmenu=function(){returnfalse;}
$("#contextMenu").hide();
$("#contextMenu").attr("style","display:block;position:fixed;top:"
+e.pageY
+"px;left:"
+e.pageX
+"px;width:180px;");
$("#contextMenu").show();
}
});
$("#settingInGraph").click(function(e){
$("#contextMenu").hide();});

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

返回顶部
3162201930
czq8825@qq.com

详解bootstrap用dropdown-menu实现上下文菜单

热门推荐

随机推荐