0
我有相應的按鈕和div,如果單擊一個按鈕,會顯示一個菜單,並且可能打開的任何其他菜單都被隱藏。鼠標功能防止切換
如果用戶點擊頁面上的其他位置,我也隱藏了這些菜單,但是我使用的mouseup
事件可以防止在用戶第二次單擊按鈕元素時隱藏菜單。
$(document).on("click", ".some-btn", function(e) { //toggles the dropdown menu
e.preventDefault();
var $this = $(this).parent().find('.dropdown-menu');
$(this).nextAll('dropdown-menu').first().toggle();
$(".actions-dropdown-menu").not($this).hide();
});
$(document).mouseup(function (e){ //hides the menu if user clicks elsewhere
var dropdown = $('.dropdown-menu');
if(!dropdown.is(e.target) && dropdown.has(e.target).length === 0){
dropdown.hide();
}
});
按鈕/菜單:
<button class="some-btn"></button>
<ul class="dropdown-menu" style="display: none;">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<button class="some-btn"></button>
<ul class="dropdown-menu" style="display: none;">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
我試着取出條件檢查下拉不是target
但仍沒有運氣