溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
詳解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(); });
如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
