Question

我尝试做类似Facebook聊天的事情，但这个用于个人用途。一切都很好，除了一些CSS部分。

我尝试使用绝对位置来激活div，是的，但是当我在php中循环聊天框时我可以做但我需要使用float（浮动div框到右边）。

你可以查看我的jsfiddle here

以下是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

我试图从你的例子开始做到这一点！

 $(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/

Answer 3

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

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

3 个答案: