使用内联块时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-block和保证金：0px自动，以便MyDivs位于TheContainer内。问题在于，当我这样做时：

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

然后ThisDiv不再居中，因为显示从none变为block而不是inline-block，就像我在CSS定义中一样。

我知道我可以写.css('display','none')和.css('display','inline-block')，但我想知道是否有办法通过保留.show()来实现这项工作

感谢您的建议。

Answer 1

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

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

用法将是：

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

jsFiddle Demo