当我不确定元素在可见时使用 display:block 时，显示切换的替代方法?

Question

我正在一个项目中工作，其中有许多js过程，如下所示：

if (show)
$('.some-element').css('display', 'block');
else
$('.some-element').css('display', 'none');

当我不想要求.some-element在可见时使用display: block;时，我如何实现相同的目标？

例如，.some-element可能被设计为使用display: inline-block;或display: flex;。

局限性：

• 我不希望元素在隐藏时占用任何空间。出于这个原因，我认为流行的方法visibility: none;和opacity: 0;是行不通的。
• 我不想在 js 中保存任何状态，例如记住原始显示属性值。

Answer 1

这样做

if (show)
$('.some-element').css('display', '');
else
$('.some-element').css('display', 'none');

这段代码($('.some-element').css('display', '');(将在不需要时删除内联display: none属性。

Answer 2

jQuery已经用toggle、show和hide解决了这个问题：

$('.some-element').toggle(show);

或

if (show) {
$('.some-element').show();
} else {
$('.some-element').hide();
}

Answer 3

我通常做的是使用一个类作为隐藏状态，因为您知道当元素隐藏时，display属性应该是none的。

.whatever {
// normal rules
}
.whatever.hidden {
display: none;
}

然后，通过添加或删除"隐藏"类来操作元素的可见性。由于您的规则不会影响元素的可见规则，因此它可以是display: inline;或display: table-cell;或其他任何内容。

当存在内联"样式"属性时，这种方法可能会变得复杂;这就是我通常不喜欢代码中那些属性的原因。

使用display的另一种方法是为元素提供一个远离可见页面的绝对位置：

.whatever.hidden {
position: absolute;
left: -10000px;
}

这对于需要不可见但也需要实际用作表单字段的表单字段很有用。特别是Internet Explorer不喜欢不可见(display: none(输入，但可以放置屏幕外的输入。