如果不适合在首页还请说一下，我会自觉撤下…… 在制作网站，特别是小组或者论坛这一类的页面的时候，经常会遇到一件事，就是要将“帖子”折叠起来 要求点击“标题”的时候，“内容”可以收缩或展开 标准的做法中，通常会给标题这个div加上click事件，控制内容的收缩和展开 所以有了一个想法，将这样的内容简单地封装一下，形成一个可重用的方法，我称之为collapsible 有了jquery，做这个实在是太简单了，缩放的动画效果等都有了相应的方法完成

在制作网站，特别是小组或者论坛这一类的页面的时候，经常会遇到一件事，就是要将“帖子”折叠起来，这时通常会有这样的html

1 <div id="post1">
2     <div id="title1">标题</div>
3     <div id="content1">内容</div>
4 </div>


要求点击“标题”的时候，“内容”可以收缩或展开

标准的做法中，通常会给title1这个div加上click事件，控制content1的收缩和展开


所以有了一个想法，将这样的内容简单地封装一下，形成一个可重用的方法，我称之为collapsible

有了jquery，做这个实在是太简单了，缩放的动画效果等都有了相应的方法完成


事实上，有个叫toggleElement的插件可以完成相应的功能，但是看了一下那个插件，还是少了一些东西，比如说通过方法指定标题，比如说他是使用title属性来自动生成标题的……


基本思路：

对content1(选择content1作为方法的作用对象是因为collapsible的是内容而不是标题)使用，指定title1，随后给title1加上click事件

不使用jquery的toggle方法，因为那样无法自定义动画

所以通过display=="none"判断内容是否为收起状态，并进行相应的操作


主要功能：

自定义动画方式，animationType: 'fade'/'slide'/'show'

自定义速度，speed: 'normal'/'fast'/'slow'/null，其中null就没有动画了

通过自定义方法选择title，这是为了可以对多个content同时进行操作，titleEl: function() { return $(this).attr('id') + '_title'; }

如果content和title之间有别的元素的话，要移动content，当然也可以选择不移动，move: true即为移动

事件：点击，收缩和展开，分别为onClick，onHide，onShow

css：当内容收缩和展开时，标题可以有不同的css，比如前面加上"+"或"-"，分别为hideClass，showClass

初始显示状态：start: 'hide'/'show'/null，其中null就不改变当前状态了


示例在此：

http://int08h.orgorg.cn/demo.htm


注：

觉得做示例比写代码难多了……哪位有空帮我做个好看点的示例么，我想放到jquery官网去