詳解bootstrap用dropdown-menu實現上下文菜單
寫在前面：
所謂上下文菜單，它與一般菜單的區別在于：
通過右鍵觸發顯示在鼠標右鍵點擊處
鼠標在別處點擊后，該菜單消失
實現方法：
在html中定義一個普通的沒有觸發條件的dropdown-menu，然后寫這個menu的父容器的監聽即可實現。
代碼：
<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" >任務監聽</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(); }); 如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
