jQuery 在隐藏父级中显示子级，错误设置显示属性

Question

请参阅以下 jsfiddle 进行演示：

http://jsfiddle.net/Drb8s/

当您对隐藏父级中的元素使用 jQuery show() 时，似乎会出现此问题。 （然后随后向家长展示）。如果子元素最初是

display: table

，当你调用 show() 时，它会将其切换回 display: block，这是不正确的。

我只能使用小提琴中的控制台来复制此内容，但是在我的应用程序中，我通过代码遇到了这个问题。

HTML：

<div class="outer">
   <div class="inner">Inner</div>
</div>

CSS：

.outer {
  display: none;
}
.inner {
  display: table;
}​

JS：

$('.inner').hide();
// $('.inner').show();​​​  // this works in jsfiddle (but not in my app, or run through console)

编辑：作为一种解决方法，我正在使用

.css('display', 'table')

，但我只是想知道是否有人知道其实际原因。

Answer 1

.show

和

.hide

的展示/隐藏方式非常残酷；如果您想要特定的非传统风格，则不能使用它们：

$(".inner").data('oldstyle', $(".inner").css('display')).css('display', 'none');
...
$(".inner").css('display', $(".inner").data('oldstyle'));