javascript - 将父 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。目前它弹出到父 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>