鼠标up功能阻止切换

Mouseup Function Prevents Toggle

本文关键字：up 功能 鼠标      更新时间：2023-09-26

我有相应的按钮和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，但仍然没有运气

我正在检查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();
    }
});
相关文章：