jquery - body 塌陷时面板的头部没有塌陷

我建立了一个聊天界面，我有能力为每一个客户制作聊天框。问题是当我试图最小化一个标签，而另一个标签是开放的，它以有线方式工作
如何使最小化的聊天框标记转到父项的底部而不是顶部
打开单个聊天框
最小化单个聊天框
打开两个聊天框（不要担心两个聊天框之间的边距）
问题一个聊天框打开，另一个最小化
如果两个面板最小化，则看起来正常
故事是这样的
聊天框位于固定在窗口底部的div中，消息框浮动在右侧。
我添加了一个红色背景，因此父div是可见的，re是meaasge框代码

        $(document.body).on("click", ".msg_head", function (event) {
            $(event.target).parent().find('.msg_wrap').slideToggle('slow');
        });


        $(document.body).on("click", ".closechat", function (event) {
            event.stopPropagation();
            $(this).parents()[1].remove();
        });

.chat_container{
    position:fixed;
    bottom:0px;
    right: 290px;
}
.msg_head{
    background:#3498db;
}

.msg_body{
    background:white;
    height:200px;
    font-size:12px;
    padding:15px;
    overflow:auto;
    overflow-x: hidden;
}
.msg_input{
    width:100%;
    border: 1px solid white;
    border-top:1px solid #DDDDDD;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}

.closechat{
    float:right;
    cursor:pointer;
}
.minimize{
    float:right;
    cursor:pointer;
    padding-right:5px;

}

<div style="  position:fixed; bottom:0px;right: 290px;background-color: red;">
    <div class="chat_container" style="">
    <div class="msg_box" style="float: right;position: relative;" data-eid="8">
        <div class="msg_head">vikum vikum
            <div class="closechat">x</div>
        </div>
        <div class="msg_wrap" style="display: block;">
            <div class="msg_body">
                <div class="msg_push"></div>
            </div>
        <div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>
        </div>
    </div>



    <div class="msg_box" style="float: right;position: relative;" data-eid="7">
        <div class="msg_head">Shalitha Shalitha
            <div class="closechat">x</div>
        </div>
        <div class="msg_wrap" style="display: block;">
            <div class="msg_body">
                <div class="msg_push"></div>
            </div>
            <div class="msg_footer"><textarea class="msg_input" rows="4" style="margin: 0px; width: 280px; height: 68px;"></textarea></div>
        </div>
    </div>




    </div>
</div>

最佳答案

只需在onclick事件中添加这些行，它就会像一个符咒一样工作；）

$(document.body).on("click", ".msg_head", function (event) {
        var $msgbox = $(event.target).parent();
        $msgbox.find('.msg_wrap').slideToggle('slow');
        $msgbox.animate({'padding-top':$msgbox.find('.msg_wrap').height()},'slow');

    });

关于jquery - body 塌陷时面板的头部没有塌陷，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29293821/