使用 jquery 1.9 显示隐藏的 inline-block 元素答案

【问题标题】：Show hidden inline-block elements with jquery 1.9使用 jquery 1.9 显示隐藏的 inline-block 元素
【发布时间】：2013-04-11 15:33:58
【问题描述】：

如果隐藏块是 css: inline-block，我在显示隐藏块时遇到问题。

div.profile{
    display: inline-block;
}


<div class='profile' style='display: none;'>profile info</div>

但是当我执行 $('.profile').show() 时，它会变成 style='display: block'（我可以在 firebug 中看到）并覆盖我的 css 样式...

我该如何解决这个问题？

顺便说一句，在 jquery 1.4 中它可以正常工作。

谢谢。

更新

$.css('display', 'inline-block'), imo，不是通用解决方案。

【问题讨论】：

【解决方案1】：

您应该更改 css 样式，而不是使用 show 函数，它将其更改为 block。

$('.profile').css('display', 'inline-block');

【讨论】：

是的，它会工作，但它不是一个 jquery 错误吗？因为，如果我有可见的内联块，那么 hide() 和 show() 它仍然是内联块
@DmitriyApollonin - jQuery 不知道 CSS 中指定的内容是否为 display: none。而.show() 必须绝对显示它，无论CSS 中有什么。这一定是唯一的原因。这实际上更像是对 1.9 之前的错误的修复。
@techfoobar 听起来不错，是的，但是根据文档：如果一个元素的显示值为 inline，则隐藏并显示，它将再次内联显示。 所以，jquery '知道'一些关于指定 css 属性的东西。还是我不对？
@DmitriyApollonin - 如果元素第一次隐藏使用 jQuery（在使用 jQuery 显示之前），它可能能够记住元素的先前显示状态，是的（虽然我怀疑它会存储那个）。

【解决方案2】：

$('.profile').css('display', 'inline-block')

【讨论】：

【解决方案3】：

虽然在这种情况下将其显式设置为 inline-block 有效，但理想情况下，您应该将其设置为 '' 以应用来自 CSS 的任何内容，无论是 inline、inline-block 还是 block

$('.profile').css('display', ''); // switch it back to whats specified in the CSS

【讨论】：

也许这就是 JQuery 在 show 方法中应该做的。
jQuery 不知道 CSS 中指定的内容是否为 display: none。并且.show() 必须明确显示它，而不管CSS 中有什么。这一定是唯一的原因。