一个可折叠留言板的js实现（带源码下载）
Javaｓｃｒｉｐｔ代码如下所示：$（文档）Ready（函数（）{）
$（。message_list。message_body：GT（0））藏（）；
$（。message_list李：GT（4））藏（）；
$（。message_head）。Click（function（）{）
$（这）。二（。message_body ），SlideToggle（500）
返回false；
}）；
停止所有消息
$（。collpase_all_message）。Click（function（）{）
$（。message_body ），SlideUp（500）
返回false；
}）；
显示所有消息
$（。show_all_message）。Click（function（）{）
美元（这个）。
$（。show_recent_only ）显示（）。
$（。message_list李：GT（4））。SlideDown（）
返回false；
}）；
仅显示最新消息
$（。show_recent_only）。Click（function（）{）
美元（这个）。
$（。show_all_message ）显示（）。
$（。message_list李：GT（4））。SlideUp（）
返回false；
}）；
}）；
CSS代码的一部分如下所示：
{ *
保证金：0；
填充：0；
}
{体
保证金：10px汽车；
宽度：570px；
字体：75% / 120%，Arial，Helvetica，sans-serif；
}
{ p
填充物：00 1em；
}
{。message_list
列表样式：无；
保证金：0；
填充：0；
宽度：383px；
}
message_list李{。
填充：0；
保证金：0；
背景：URL（图像/消息栏）不重复；
}
{。message_head
填料：5px 10px；
光标：指针；
职位：相对；
}
message_head.timestamp {。
颜色：# 666666；
字体大小：95%；
位置：绝对；
右：10px；
上图：5px；
}
message_head {引用。
字体大小：100%；
字体粗细：粗体；
字体样式：正常；
}
{。message_body
Padding: 5px 10px 15px;
}
{。collapse_buttons
文本对齐：正确；
边境上# e4e4e4 solid 1px；
填料：5px 0；
宽度：383px；
}
collapse_buttons {。
左：15px保证金；
浮子：右边；
}
{。show_all_message
背景：URL（高/下箭头、GIF）不重复右中心；
填充右：12px；
}
{。show_recent_only
显示：无；
背景：URL（图像/高箭头箭头GIF）不重复右中心；
填充右：12px；
}
{。collpase_all_message
背景：网址（图片/崩溃全部GIF）不重复右中心；
填充右：12px；
颜色：# 666666；
}
html中的代码如下所示：
张三：1分钟前。
你好.
这是最后一条信息。
Li Si：2分钟前。
你也很好
王五：1天前
第一次
Li Si：2天前。
顶部
王五：3天前
支持
Li Si：5天前。
大家好
张三：6天前。
大家好
Li Si：7天前。
这里很好。
王五：8天前
好的地方
所有消息（9）只显示五条消息来收集所有消息。
案例下载