jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何像facebook聊天那样折叠div大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试做类似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

你的例子上:

我会在chat_Box类上使用display:inline-block …这样父级将响应盒子的大小.

并向右浮动chat_Box的父级

#chat_area {
    float:right;
}

user_Box本身只会与chat_Box底部对齐.

.user_Box {
    ...
    bottom:0;
}

这样整个聊天区域将浮动到右边…并且当所有聊天框关闭时,调整大小缩小到底部.

这是一个小插图:
http://jsfiddle.net/mazzt/7/

大佬总结

以上是大佬教程为你收集整理的jquery – 如何像facebook聊天那样折叠div全部内容,希望文章能够帮你解决jquery – 如何像facebook聊天那样折叠div所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。