这篇文章主要介绍了详解bootstrap用dropdown-menu实现上下文菜单的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

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

写在前面:

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

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

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

实现方法:

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

代码:

<div id="settingInGraph"> 
              <ul role="menu" 
                aria-labelledby="dropdownMenu" id="contextMenu"> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务指派</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务监听</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务表单</a></li> 
                <li></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a></li> 
              </ul> 
            </div> 
$("#settingInGraph").mousedown(function(e) { 
if (3 == e.which) { 
     document.oncontextmenu = function() {return false;} 
     $("#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();              }); 

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

最新资讯
店内血拼改成网上冲浪 疫情时代让黑色星期五更加不一样

店内血拼改成网上冲浪

一些零售观察人士开始把“黑五”戏称为“嘿五”。而且
3年花10万买盲盒 是什么让年轻人上瘾?

3年花10万买盲盒 是什

盲盒的不确定性会给消费者产生持续的期待,正是这种上瘾
做空机构香橼称沽空Palantir 目标股价20美元

做空机构香橼称沽空Pa

做空机构香橼称沽空Palantir,目标价为20美元。
美股新能源汽车股盘初走高 小鹏汽车涨超4%

美股新能源汽车股盘初

美股新能源汽车股盘初走高,特斯拉涨2.65%,理想汽车涨2.7
爱奇艺跌超4% 百度回应称出(bu)售(mai)爱奇艺股份传闻不实

爱奇艺跌超4% 百度回

美股三大指数集体高开,道指涨0.25%,纳指涨0.54%,标普500
兴盛优选大战互联网巨头

兴盛优选大战互联网巨

现在的兴盛优选,难听的说,是为了传闻的上市,被互联网公司
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,