我尝试做类似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,聊天框会崩溃到顶部,但如何崩溃到底部? ,尝试点击关闭按钮。
答案 0 :(得分:6)
我接近这个的方式是这样的:
<强>步骤:强>
在您的示例中:
我会在display:inline-block
类上使用chat_box
...这样父母就会对框的大小做出回应。
向右浮动chat_box
#chat_area {
float:right;
}
但user_box
本身只会与chat_box
的底部对齐。
.user_box {
...
bottom:0;
}
这样整个聊天区域将浮动到右边...并且当所有聊天框关闭时,调整大小缩小到底部。
这是一个例子的小提琴: http://jsfiddle.net/mazzt/7/ 强>
答案 1 :(得分: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/
答案 2 :(得分:1)
尝试slideToggle();
和/或toggleClass();