Jquery 如何像facebook聊天一样折叠div

我试着做一些类似于facebook聊天的事情，但这是为了个人使用。除了一些css部分外，一切都很好

我尝试用position absolute来排列div，是的，但在php中循环聊天框时会出现问题。。我需要使用float（右侧的float div框）

你可以查看我的JSFIDLE

下面是jquery中的一些代码片段

//Close
$('.closed1').click(function () {
    $('.wrap_box1').hide();
    $('.main_chat1').addClass('hide_wrap_box');
});

//Open
$('.open_chat1').click(function () {
    $('.wrap_box1').show();
    $('.main_chat1').removeClass('hide_wrap_box');
});

---

如果您看到我的JSFIDLE，聊天框将折叠到顶部，但如何折叠到底部，尝试单击关闭按钮。

尝试

滑动切换（）和/或
切换类（）
我的方法是这样的：

步骤：


创建一个围绕聊天框的聊天区
显示为内联块的聊天框
将用户框置于底部：0

关于您的示例：

我会在
chat\u框上使用
display:inline block
。。。这样，父对象将响应框的大小

然后向右浮动
聊天盒的父项

#chat_area {
    float:right;
}

但是
user\u框
本身将与
chat\u框
的底部对齐

.user_box {
    ...
    bottom:0;
}

这样，整个聊天区域将向右浮动。。。关闭所有聊天室后，缩小到底部

这里有一把提琴用于说明：
我试着从你的例子开始

 $(document).ready(function () {
        $('.main_chat2').toggle("bounce",{ times: 3 }, "slow");
    $('.user_box').click(function () {
        if ($('.wrap_box2').is(":visible")) {
            $('.wrap_box2').hide();
            $('.main_chat2').addClass('hide_wrap_box');
            $('#icon').html('^');
        }
        else {
            $('.wrap_box2').show();
            $('.main_chat2').removeClass('hide_wrap_box');
            $('#icon').html('x');
        }
    });
   });

您可以在以下链接中看到：
看起来不错，有什么问题吗？请尝试单击“关闭”按钮。。小X