jquery 使用 inline-block 时显示/隐藏

Question

我有一些如下所示的 HTML 和 CSS:

<div id="TheContainer">
<div class="MyDivs"></div>
<div class="MyDivs" id="ThisDiv"></div>
</div>

#TheContainer{text-align:center;}
.MyDivs{margin:0px auto;display:inline-block;}
#ThisDiv{display:none;}

我使用 inline-block 和 margin:0px auto ，以便 MyDivs 在 TheContainer 内居中。问题是当我这样做时:

$('#TheContainer').children().hide();
$('#ThisDiv').show();

然后 ThisDiv 不再居中，因为显示从无更改为 block ，而不是像我在 CSS 定义中那样的内联 block 。

我知道我可以写 .css('display','none') 和 .css('display','inline-block') 但我是想知道是否有办法通过保留 .show()

来完成这项工作

感谢您的建议。

Answer 1

您可以对 jQuery 进行扩展...

$.fn.showInlineBlock = function () {
    return this.css('display', 'inline-block');
};

用法是:

$('#whatever').showInlineBlock();

jsFiddle Demo