Question

我有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会在保留空间的同时消失。但是当我再次点击时没有任何反应。我想有一件事我只是在误解，但无法弄清楚是什么。

Answer 1

According to the docs :hidden选择器：

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

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

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

你的CSS会在哪里：

.visHidden {
    visibility:hidden;
}

Answer 2

工作小提琴：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所说，visibility: hidden仍然是jQuery标准的“可见”。因此，您可以检查它是否确实具有hidden样式。

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

2 个答案: