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

我写了一个小列表菜单，当用户点击一个按钮时显示，如果他点击菜单外的任何地方，它会隐藏。但是，如果他再次点击该按钮，则不会发生任何事情，因为jQuery似乎没有注意到更改后的可见性。检测div是隐藏还是可见的问题

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 
});

看来，if($('#inbox_menu').is(':hidden'))总是返回true，即使菜单是可见的。同样的事情发生，如果我改变这条线if($('#inbox_menu').css('display') == 'none')

我在这里错过了什么？

JSFiddle用于演示。

来源

2014-09-04 Demnogonis

[jquery.com（http://api.jquery.com/hidden-selector/）'如何：隐藏确定为在jQuery 1.3.2中更改。如果元素或其任何父母在文档中不占用空间，则假定元素被隐藏。没有考虑到CSS可见性（因此，$（elem）.css（“visibility”，“hidden”）.is（“：hidden”）== false）' – JNF 2014-09-04 14:22:32

'）为了不测试可见性，为什么不使用[toggle] （http://api.jquery.com/toggle/）？ – JNF 2014-09-04 14:23:51

@JNF我不设置可见性属性，但显示属性。如果元素具有'display：none'，则它在文档中不会占用空间，因此if（$（'＃inbox_menu'）。is（'：hidden'））'如果元素可见则返回false，并隐藏元素 – Demnogonis 2014-09-04 14:37:50

我认为这可能是你需要的。文档鼠标上升导致其他功能出现问题。我也改变了显示/隐藏切换

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 
});

来源

2014-09-04 14:40:02 ConfusedShark

是的，这工作，现在的问题是非常明显的; D。谢谢。 – Demnogonis 2014-09-04 14:49:59

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

回答

相关问题