2015-07-19 66 views
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但仍沒有運氣

回答

0

我檢查了錯誤在mouseup上的元素。應該一直在檢查按鈕而不是菜單。這現在可以正常工作:

$(document).mouseup(function (e){ //hides the menu if user clicks elsewhere 
    var button = $('.some-btn'); 
    if(!button .is(e.target) && button.has(e.target).length === 0){ 
     $('.dropdown-menu').hide(); 
    } 
});