Question

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

Answer 1

我正在检查mouseup上的错误元素。本来应该检查按钮而不是菜单。这现在可以正常工作：

 <div id="main_container"> ajax contents goes here </div>

鼠标功能可防止切换

1 个答案: