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

【问题标题】：jQuery show child in hidden parent, setting display property incorrectlyjQuery在隐藏的父级中显示子级，设置显示属性不正确
【发布时间】：2023-03-29 11:37:01
【问题描述】：

请看下面的 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')，但我只是想知道是否有人知道此问题的实际原因。

【问题讨论】：

标签： jquery css dom show-hide

【解决方案1】：

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

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

【讨论】：

谢谢伙计。只是想知道这是 jquery 中的错误，还是我做事方式的问题。试图更好地理解为什么。
@captainclam jQuery 使用内部函数 css_defaultDisplay 通过在 DOM 中创建元素并查看浏览器为其提供的默认显示来确定隐藏元素的显示样式。