檢測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是隱藏還是可見的問題

回答

相關問題