如何像Facebook聊天一样折叠div

Question

我正在尝试做一些类似Facebook聊天的东西，但这是为个人使用。除了某些CSS部分以外，一切都很好。 我尝试使用绝对定位来排列div，可以实现，但问题出现在我在php中循环聊天框时...我需要使用float（将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，聊天框将折叠到顶部，但如何折叠到底部？请尝试点击关闭按钮。

- rusly

---

看起来不错，有什么问题吗？ - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

尝试点击关闭按钮...小X。 - rusly

Answer 1

我会像这样处理：

步骤：

创建一个包围聊天框的聊天区域

将聊天框显示为内联块

将用户框定位到底部:0

根据你的示例：

我会在chat_box类上使用display:inline-block...这样父级就会响应框的大小。

并将chat_box的父级向右浮动。

#chat_area {
    float:right;
}

但是user_box本身将仅对齐到chat_box的底部。

.user_box {
    ...
    bottom:0;
}

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

这里有一个演示的代码片段： http://jsfiddle.net/mazzt/7/

- Martin Turjak

Answer 2

我尝试从您的示例开始做这件事！

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

你可以在这个链接中查看： http://jsfiddle.net/ernestoarbitrio/DyfBW/31/

- e.arbitrio

Answer 3

尝试使用 slideToggle(); 和/或 toggleClass();。

- Axente Paul