强制 jQuery show/hide 尊重显示：table？

Question

我有点css:

div { display: table; }

$("div").hide();
$("button").click(function(){
    $("div").show();
});

这非常有效。当它触发 show/hide 时，它会像预期的那样切换 none/table。但是，在加载页面时，div.hide 部分需要一秒钟才能触发，并且该元素会在一瞬间可见。它看起来很糟糕，所以我需要添加 display: none 以防止出现短暂的闪光。现在的问题是它总是 return 之后的元素为 display: block。我知道这是因为 jQuery 正在切换初始状态，因此使用 none 而不是 table 意味着它将恢复为标准 div 显示。

那么在show/hide触发的时候具体如何设置display: table呢？

Answer 1

试试这个：$('div').css('display', 'table');。希望对您有所帮助:)

只是为了更详细一点，隐藏和显示元素时，通常的另一种选择是使用 CSS visibility: hidden 和 visibility: visible。当元素被隐藏时，它们以不同的方式显示，但页面就像元素在那里一样。

Answer 2

在显示设置为 table 的 div 之前点击添加 class。我做了一个 JSFiddle。请检查 here 是否符合您的要求

点击处理程序更改为

$("button").click(function () {
    $("div").addClass('DispTable');
    $("div").show(500);
});

并在 css

.DispTable {
    display:table;
}

强制 jQuery show/hide 尊重显示：table？

Force jQuery show/hide to respect display: table?

javascript

css

jquery

show

show-hide