0

我有 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消失，同时保持空间。但是当我再次点击时，什么也没有发生。我想我只是想念atm的一件小事，但不知道是什么。

4

2 回答 2

1

根据选择器的文档:hidden：

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

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

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

你的 CSS 将在哪里：

.visHidden {
    visibility:hidden;
}
于 2013-09-29T23:21:37.707 回答
1

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

于 2013-09-29T23:26:41.713 回答