Question

我写了一个小列表菜单，当用户点击一个按钮时会显示该菜单，如果他点击菜单外的任何地方，它就会隐藏。然而，如果他再次点击按钮没有任何反应，因为jQuery似乎没有注意到更改的可见性。

JS代码：

$(document).on('mouseup', function (e) {
    var container = $('#inbox_menu');
    if (!container.is(e.target)) {
        container.hide();
    }
});
$('#inbox_menu_btn').on('click', function (e) {
    if ($('#inbox_menu').is(':hidden')) {
        $('#inbox_menu').show();
    } else {
        $('#inbox_menu').hide();
    }
});
$('#inbox_menu li').on('click', function () {
    var type = $(this).data('type');
    $(this).siblings('li').removeClass('active');
    $(this).addClass('active');
    $('#inbox_menu').hide();

    // other stuff
});

即使菜单可见，{{1}}似乎总是返回true。如果我将此行更改为if($('#inbox_menu').is(':hidden'))

，则会发生同样的情况

我在这里错过了什么吗？

JSFiddle用于演示。

Answer 1

我认为这可能就是你所需要的。文档鼠标向上导致其他功能出现问题。我还改变了show / hide to toggle

fiddle

$(document).click(function () {
   $('#inbox_menu').hide();
});

$('#inbox_menu_btn').click(function(event){
    event.stopPropagation();
    $('#inbox_menu').toggle();
});

$('#inbox_menu li').on('click', function () {

    var type = $(this).data('type');
    $(this).siblings('li').removeClass('active');
    $(this).addClass('active');
    $('#inbox_menu').hide();

    // other stuff
});

检测div是隐藏还是可见的问题

1 个答案: