将父div平滑地增长到添加的子div的高度-Javascript

Question

我浏览了整个网站，想了解我试图实现的目标，但还没有找到适合我情况的答案。

我有一个div，它是表单验证的警报框

<div id="alert_box" class="alert alert-danger alert-dismissable" 
     style="margin-top:0px !important; margin-bottom:0px !important; 
     display:none;">
//Alert message goes in here
</div>

div设置为在表单中出现错误时显示。此div的高度是自动的。它在一个带有其他几个div 的父div中

<div id="parent_div">
   <div id="alert_box" class="alert alert-danger alert-dismissable" 
            style="margin-top:0px !important; margin-bottom:0px !important; 
            display:none;">
           //Alert message goes in here
   </div>
   <div id="other_1">
   </div>
   <div id="other_2">
   </div>
   <div id="other_3">
   </div>
</div>

当div设置为显示时，我希望它能平滑地扩展父div。目前它弹出到父分区。

下面是我当前密码验证的一个例子

function validatePassword(fld) {
       var input_div = document.getElementById('createPassword_div');
       var alert_box = document.getElementById('alert_box');
       if (fld.value == "") {
          input_div.className += ' has-error'; 
          alert_box.style.display = 'block';
          alert_box.innerHTML = "You didn't enter a password";
          return false;
       } 
       return true;
    }

当子div设置为出现时，如何使父div平滑增长？

Answer 1

$(document).ready(function(){
    setTimeout(function(){
        $("#error").html("Error Message").hide();
        $("#error").slideDown();
    }, 1000);
})

.temp{
    height: 50px;
}
#error{
    height: auto;
}

<div id=parentDiv>
    <div id=error></div>
    <div class=temp>ABCD EDFG</div>
    <div class=temp>ABCD EDFG</div>
    <div class=temp>ABCD EDFG</div>
</div>