jquery - 如何像 Facebook 聊天一样折叠 div

Question

我尝试做一些类似的事情，比如 facebook 聊天，但这是供个人使用的。除了一些 css 部分外，一切正常。

我尝试使用绝对位置来排列 div，是的，但是当我在 php 中循环聊天框时会出现问题。我需要使用浮动（将 div 框向右浮动）。

你可以在这里查看我的 jsfiddle

下面是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');
});

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

Answer 1

我会处理这个的方式是这样的：

脚步：

• 创建一个围绕聊天框的聊天区域
• 聊天框显示为内联块
• 将用户框定位到底部：0

在你的例子中：

我会display:inline-block在chat_box课堂上使用......这样父母就会响应盒子的大小。

并向右浮动chat_box

#chat_area {
    float:right;
}

但它user_box本身只会与chat_box.

.user_box {
    ...
    bottom:0;
}

这样，整个聊天区域将向右浮动......并在所有聊天框关闭时缩小到底部。

这是一个用于说明的小提琴：http: //jsfiddle.net/mazzt/7/

Answer 2

i've tried to do it starting from your example!

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

you can see it at this link: http://jsfiddle.net/ernestoarbitrio/DyfBW/31/

Answer 3

尝试slideToggle();和/或toggleClass();