詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單

更新時(shí)間：2017年09月22日 09:41:24 作者：lynnlysh

這篇文章主要介紹了詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下

詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單

寫在前面：

所謂上下文菜單，它與一般菜單的區(qū)別在于：

通過右鍵觸發(fā)顯示在鼠標(biāo)右鍵點(diǎn)擊處

鼠標(biāo)在別處點(diǎn)擊后，該菜單消失

實(shí)現(xiàn)方法：

在html中定義一個(gè)普通的沒有觸發(fā)條件的dropdown-menu，然后寫這個(gè)menu的父容器的監(jiān)聽即可實(shí)現(xiàn)。

代碼：

<div id="settingInGraph"> 
              <ul class="dropdown-menu" role="menu" 
                aria-labelledby="dropdownMenu" id="contextMenu"> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務(wù)指派</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務(wù)監(jiān)聽</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務(wù)表單</a></li> 
                <li class="divider"></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();              });

如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

用jquery實(shí)現(xiàn)點(diǎn)擊欄目背景色改變
用jquery如何實(shí)現(xiàn)點(diǎn)擊一欄目實(shí)現(xiàn)欄目變色，再點(diǎn)擊另一欄目也變色，但原來的變回原色,本文提供解決方法，需要了解的朋友可以參考下
2012-12-12
jQuery實(shí)現(xiàn)Table分頁效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)Table分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
基于jQuery的煙花效果（運(yùn)動(dòng)相關(guān)）點(diǎn)擊屏幕出煙花
基于jQuery的煙花效果（運(yùn)動(dòng)相關(guān)）點(diǎn)擊屏幕出煙花，經(jīng)測試不能點(diǎn)擊過多，容易假死
2012-06-06
基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能
這篇文章主要介紹了基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下
2016-01-01
用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡單的下拉菜單
這篇文章主要介紹了用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡單的下拉菜單,需要的朋友可以參考下
2014-05-05
jQuery樹控件zTree使用方法詳解（一）
這篇文章主要為大家詳細(xì)介紹了jQuery樹控件zTree使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery.Form上傳文件操作
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過本文學(xué)習(xí)下吧
2017-02-02
jQuery滾動(dòng)監(jiān)聽實(shí)現(xiàn)商城樓梯式導(dǎo)航效果
這篇文章主要介紹了jQuery滾動(dòng)監(jiān)聽，實(shí)現(xiàn)商城樓梯式導(dǎo)航,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
jQuery cdn使用介紹
如果您不希望下載并存放jQuery，那么也可以通過 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用它，下面是具體實(shí)現(xiàn)，有類似需求的各位可以參考下哈，希望對(duì)你有所幫助
2013-05-05
jquery判斷單個(gè)復(fù)選框是否被選中的代碼
jquery判斷單個(gè)復(fù)選框是否被選中的代碼，需要的朋友可以參考下。
2009-09-09