通过可见性隐藏和显示元素:隐藏/可见

Hiding and showing an element via visibility:hidden/visible

本文关键字：隐藏 可见 元素 可见性 显示      更新时间：2023-09-26

我有 2 个div 框，单击其他 2 个div 框时应该显示/隐藏。我希望div保留他们的空间，这样它就不会破坏DOM，所以我想.toggle()这是毫无疑问的。

我试过这个没有运气：

$('#red, #pink').click(function() {
// Based on the id property of the clicked element 
// this selects #reddef or #pinkdef element
if($('#' + this.id + 'def').is(":visible")) {
$('#' + this.id + 'def').css('visibility','hidden');} 
else if($('#' + this.id + 'def').is(":hidden")) {
$('#' + this.id + 'def').css('visibility','visible')}
});

因此，如果我单击#red那么#reddef在保留空间的同时消失。但是当我再次单击时，没有任何反应。我想我错过了自动取款机，但不知道是什么。

根据:hidden选择器的文档：

可见性：隐藏或不透明度：0 的元素被视为可见，因为它们仍然占用布局中的空间。

我建议添加/删除一个类，因为这更容易测试，如下所示：

if($('#' + this.id + 'def').hasClass('visHidden')) {
    $('#' + this.id + 'def').removeClass('visHidden')
}
else {
    $('#' + this.id + 'def').addClass('visHidden');
}

您的 CSS 将在哪里：

.visHidden {
    visibility:hidden;
}

工作小提琴：http://jsfiddle.net/rYYPb/

$('#red, #pink').on('click', function() {
    var $def = $('#' + this.id + 'def');
    if ($def.css('visibility') === 'hidden') {
        $def.css('visibility', 'visible')
    }
    else {
        $def.css('visibility', 'hidden');
    }
});

就像winterblood说的那样，按照jQuery的标准，visibility: hidden仍然是"可见的"。因此，您可以检查它是否真的具有hidden样式。

相关文章：