詳解bootstrap用dropdown-menu實現上下文菜單

寫在前面：

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

通過右鍵觸發(fā)顯示在鼠標右鍵點擊處

鼠標在別處點擊后，該菜單消失

實現方法：

在html中定義一個普通的沒有觸發(fā)條件的dropdown-menu，然后寫這個menu的父容器的監(jiā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" >任務指派</a></li>                 <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務監(jiān)聽</a></li>                 <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務表單</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ū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！