Javascript 最大高度：0未折叠Div

我希望我的聊天框在他们触摸聊天标题时崩溃，类似于facebook。我知道添加hide_wrapBox是正确的，但它没有将其包含的元素的高度设置为（折叠的）固定高度。换句话说，聊天框中的消息 消失，但盒子仍然站着，我希望它能最小化

     <div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">

      <!-- Messages container -->
      <div id="messages-card" style="display:none;" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
        <div class="mdl-card__supporting-text mdl-color-text--grey-600">

          <div id="convoHeader">HEADER</div>
          <div class="wrapBox">
          <div id="messages">
            <span id="message-filler"></span>
          </div>
          <form id="message-form" action="#">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" type="text" id="message" placeholder="Type a message...">
            </div>
          </form>
          <form id="image-form" action="#">
            <input id="mediaCapture" type="file" accept="image/*,capture=camera">
            <button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
            </button>
          </form>
          </div>
        </div>
      </div>

      <div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
        <div class="mdl-snackbar__text"></div>
        <button class="mdl-snackbar__action" type="button"></button>
      </div>

    </div>

---

它实际上正在崩溃，但在那些div（如#messages card）周围有一个包装，它正在设置一个高度。因此，当消息正在崩溃时，ා消息卡的父级保持您设置的高度，因此似乎没有崩溃：

#messages-card {
  float: right;
  z-index: 1;
  height: 400px;
  width: 300px;
  bottom: 0%;
  margin-top: 15px;
}

---

您需要调整包装器的高度和位置，以解决您遇到的问题。

不要在邮件中添加隐藏包装盒，而是尝试在包装盒上切换它

$('#convoHeader').click(function(){
 if($('.wrapBox').is(":visible")){
     $('.wrapBox').addClass('hide_wrapBox');
 }else{
     $('.wrapBox').removeClass('hide_wrapBox');
 } 
});

#messages-card {
  float: right;
  z-index: 1;
  height: 400px;
  width: 300px;
  bottom: 0%;
  margin-top: 15px;
}

$('#convoHeader').click(function(){
 if($('.wrapBox').is(":visible")){
     $('.wrapBox').addClass('hide_wrapBox');
 }else{
     $('.wrapBox').removeClass('hide_wrapBox');
 } 
});