当身体塌陷时，面板的头部不会塌陷

Question

我正在建立一个聊天界面，我有能力为每个客户端制作聊天框。问题是当我尝试最小化标签而另一个标签打开时，它以有线方式工作

如何使最小化的聊天框标记转到父级的底部而不是顶部 单个聊天框打开

单个聊天框最小化

打开两个聊天框（不用担心两个聊天框之间的边距）

问题一个聊天框打开，另一个最小化

如果两个面板最小化，它看起来很正常

这是故事

聊天框位于固定在窗口底部的div中，消息框浮动到右侧。

我添加了一个红色背景，所以父div是可见的是meaasge框代码

＆＃13;

＆＃13;

        $(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();
        });

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将这些行添加到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');

    });