当子 div 调整大小时，防止父 div 调整大小

Question

我想要完成的是在调用 jQuery $().hide() 之后，在当前页面上隐藏一个子 div 的动画，然后在其位置显示一个新的 div。

当我调用 .hide() 时，父 div 会调整大小，我不希望这样。

parent 有两个 div，一个 text 填充的 div 和有问题的 div，所以当我调用 hide 时，只剩下纯文本 div。我希望height 保持不变，因为新内容的高度相同。
这是我所拥有的：

<div class="adminContent"> //Wrapper div, this should not change in height of 668px
    <div class="adminTitle"> // Text only div, remains after .hide is called
        <a href="~/Admin/Index">Admin</a> > Manage Class Roster
    </div>
<div class="resetBody" id="manageClassBody1"> // Div that is being hidden/replaced
... // div contents
</div>

CSS

.adminContent {
    background: #F7F7F7;
    -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    border-radius: 5px;
    min-height: 668px;
}

我应该如何让它在我隐藏子 div 后它的高度是静态的？谢谢！

编辑：我想用动画在两者之间切换两个 div 进行就地交换。我查看了 jQuery 提供的replaceWith()，但我不确定如何使用它来满足我的需求。

Answer 1

我建议使用 JQuery 的动画功能来完成您的任务。

我为您创建了一个示例JSBin。

例子：

$(document).on("click", "#togglebtn", function() {
  var divs = $('.resetBody, .resetBody2');
  var hiddenDiv = divs.filter(":not(:visible)");
  var visibleDiv = divs.filter(":visible");

  visibleDiv.fadeToggle({
    complete: function() {
      hiddenDiv.fadeToggle();
    }
  });

});

.adminContent {
  background-color: lightgreen;
  padding: 10px;
}
.resetBody {
  background-color: #880000
}
.resetBody2 {
  background-color: lightblue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adminContent">//Wrapper div, this should not change in height of 668px
  <div class="adminTitle">much text wow! much text wow! much text wow! much text wow! much text wow!
    <a href="~/Admin/Index">Admin</a> > Manage Class Roster
  </div>
  <div class="resetBody">Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>
  </div>
  <div class="resetBody2" style="display:none">Div 2 is taller
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>
  </div>
</div>
<div style="margin-top:10px;">

  <button id="togglebtn">Toggle</button>
</div>