jquery - jQuery在隐藏的父级中显示子级，设置显示属性不正确

Question

请参阅以下 jsfiddle 进行演示：

当您在隐藏父级中的元素上使用 jQuery show() 时，似乎会出现问题。（然后随后显示父母）。如果子元素最初是 display: table，当您调用 show() 时，它会将其切换回 display: 块，这是不正确的。

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

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')但我只是想知道是否有人知道这个的实际原因。

score 1 · Accepted Answer

.show并且.hide在他们的显示/隐藏方法上是残酷的；如果您想要特定的非传统样式，则不能使用它们：

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

1 回答 1