在jquery隐藏然后显示，宽度宽度：自动元素小于正常

Question

我试图显示一个信息列表，并且它正常工作，但是当我隐藏包含列表的div然后再次显示它时，元素的宽度为＆＃34; width：auto＆ ＃34;样式正在调整尺寸，新尺寸太小：

隐藏之前：

隐藏后：

我生成元素的php看起来像这样：

<div displayitem='true'>
    <table>
        <?php
            foreach($aExistingChangeDetailsData['customers'] as $aCustomer){
                ?><tr><td><li style='width:auto;'><?php echo $aCustomer['sCustomerName']; ?></li></td></tr><?php
            }
        ?>
    </table>
</div>

我的jquery就是：

function expandSection() {
    $("div.cd-content").show("slow");
}

function collapseSection() {
    $("div.cd-content").hide("slow");
}

我猜这个问题是由于幻灯片动画的重新调整大小，是否有任何简单的方法来保持宽度的宽度：隐藏后的自动元素，以便将它们恢复到合适的大小？ / p>

编辑： 对于每个元素，似乎正在将宽度减少5个。

Answer 1

尝试分别使用fadeIn和fadeOut代替show和hide，因为hide()会将元素的宽度更改为零，但是{{1} }更改属性fadeOut()并且不会opacity

Answer 2

您的内联宽度：自动样式仅在首次渲染时设置一次，您也可以在事件触发后设置：

function expandSection() {
    $("div.cd-content").show("slow").css("width", "auto");

}

function collapseSection() {
    $("div.cd-content").hide("slow");
}