javascript - 选中复选标记时增加 Div 高度

Question

选中复选标记时，我目前有一个隐藏 div 的淡入/淡出。我还想增加适当的 div 高度，然后在取消选中复选标记后删除相同的高度。这是我当前代码的一些片段：

<script type="text/javascript">
$('.checkTax').change(function() {
if ($(this).attr("checked")) {
    $('.prorateTax').fadeIn();
    return;
}
$('.prorateTax').fadeOut();
});
</script>

需要调整高度的div是：.article.prorate. 我在网上尝试了一些建议，但到目前为止没有任何效果。如果需要其他信息来提供适当的回复，请告诉我。

编辑：在各种答案之后，我根据一些建议修改了代码并最终得到（效果很好）：

<script type="text/javascript">
$('.checkTax').change(function() {
if ($(this).attr("checked")) {
    $('.prorateTax').fadeIn();
    $('article.prorate').css( "height", "+=100px" );
}
else
{
    $('.prorateTax').fadeOut();
    $('article.prorate').css( "height", "-=100px" );
}
});
</script>

感谢大家的帮助，如果我可以选择多个绿色复选标记，我会的。给出的几个建议会奏效。我也不能投票/反对，因为我没有足够的声誉。

Answer 1

您还可以使用更简单的 jQuery 方法 .height();

<script type="text/javascript">
$('.checkTax').change(function() {
if ($(this).attr("checked")) {
    $('.prorateTax').fadeIn().height(20);
    return;
}
$('.prorateTax').fadeOut().height(0);
});

Answer 2

要通过获取元素的当前高度来增加高度，您可以这样做：

$(selector).css( "height", "+=20px" );

$(selector).height( $(selector).height() + 20 );

Answer 3

我看到您正在使用 jQuery 。对于操纵高度使用：

$('selector').css('height', your_value);