很早我就写好了这些代码，也优化了好几次，主要是为了提升项目的开发速度。jquery有三种折叠效果，主要是toggle，fadetoggle，以及slidetoggle，它们共同实现了相似但是不同的界面效果，十分好用。但是如果网站上需要有大量的折叠实现，每个地方都写不同的js代码来实现，会变成非常累赘，所以一个全局的调用方法很有必要，一方面精简代码，另一方面提升开发速度。
主要代码如下（需要引入jQuery）：

$(function(){
    //折叠效果
    $("body").on("click",".toggle",function () {
        var todiv = $(this).attr("data-toggle");
        var totime = $(this).attr("data-toggle-time");
        $(todiv).fadeToggle(totime);
    });
    $("body").on("click",".fadetoggle",function () {
        var todiv = $(this).attr("data-toggle");
        var totime = $(this).attr("data-toggle-time");
        $(todiv).fadeToggle(totime);
    });
    $("body").on("click",".slidetoggle",function () {
        var todiv = $(this).attr("data-toggle");
        var totime = $(this).attr("data-toggle-time");
        $(todiv).fadeToggle(totime);
    });
});

大概的含义就是，获取自定义属性data-toggle和data-toggle-time，它们分别对应需要操控的折叠对象（可以是id可以是class，但是id必须唯一）和需要的时间。

所以Html的实例如下：

<a href="javascript:;" class="toggle" data-toggle=".box" data-toggle-time="200">折叠点击触发</a>
<div class="box">
要折叠的对象
</div>

总之，点击触发的对象必须设保护class，从toggle，fadetoggle，slidetoggle总选择任意一个效果，不能重复。data-toggle中设置操控的对象，如果对象是class就是.box，如果对象是id就是#box，非常简便。

附上我的前端框架项目地址（主要是自用，可以参考）：
[hide]https://gitee.com/ruletree/TreeUI[/hide]