jquery - 使用内联块时jquery显示/隐藏

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-blockand margin:0px auto 以便MyDivs它们居中在TheContainer. 问题是当我这样做时：

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

thenThisDiv不再居中，因为显示从无变为块而不是像我在 CSS 定义中那样的内联块。

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

感谢您的建议。

Answer 1

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

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

用途是：

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

jsFiddle 演示