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

我有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选择器的According to the docs：


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


我建议改为添加/删除类，因为这样更易于测试：

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

CSS所在的位置：

.visHidden {
    visibility:hidden;
}