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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

顺利地将父div增加到添加的子div的高度 - Javascript

1 个答案: