如何使 jquery.show() 将显示设置为 'block' 以外的内容

Question

我正在开发一个单页网络应用程序，所以我有很多 HTML div 的相关 CSS 规则设置 "display: none;" 取决于根据用户的操作，我使用 $('#some-id').css('display', 'block') 之类的东西将显示设置为 [=21= 以外的东西].这使得 div 可见，一切正常。

但这很难看，因为我的 JavaScript 代码必须知道每个 div 的 "display" 使用什么值。一般是 "block," "inline," 或者 "grid." 这个信息应该在 CSS 里，而不是在 JavaScript.

里

我尝试使用 jquery.show() 和 jquery.hide()，但是如果开始显示为 "none."，那总是会导致显示设置为 "block"希望 CSS 中有某种方法可以指示 div 的正确值，而不是 "none." 但我还没有找到类似的东西。

有没有更优雅的方案？

Answer 1

你可以直接使用

$(whatever).css('display', 'what you want');

删除内联样式属性类似于另一个问题：Use jQuery to remove an inline style

Answer 2

一个更优雅的解决方案是使用 classes。

如您所说，display 信息在您的 CSS 文件中。最简单和最易读的解决方案是向应该隐藏的元素添加 .hidden class。

在您的 CSS 文件中：

.hidden {display: none;}

在 jQuery 中切换 class:

// Equivalent of hide():
$(el).addClass("hidden")

// Equivalent of show():
$(el).removeClass("hidden")

您无需再添加任何内容。没有额外的 CSS 规则或任何东西。如果您使用的是特定规则，则可能需要添加 !important。我认为这是合理使用它的情况之一，即：

.hidden {display: none !important;}

现在所有具有 hidden class 的元素都将被隐藏，即使它们的选择器更具体。

Answer 3

也许您可以尝试 css 初始显示来恢复元素（内联或块）的原始显示。

$('#some-id').css('display', 'initial');

Answer 4

$('#element').show();
%('#element').css('display','inline')

或

$('#element').addClass('show');

在样式表中：

.show{
   display: inline;
}

两者都应该可以正常工作。不知道还有什么办法。

如何使 jquery.show() 将显示设置为 'block' 以外的内容

How to make jquery.show() set display to something other than 'block'

jquery

display