JS实现点击展开、点击关闭的效果实例代码
可扩展的简易点击展开/关闭效果,分别用原生网页特效和jquery实现.使用方法及相关解释,请参见源码.
另,授人以鱼,不如授人以渔.我写的只是一个原型,提供一个思路一种方法.注释中我也注明了,如果你想要酷炫的效果,你可以根据自己的实际需求扩展.


jquery

    $(function(){
        var $title = $('div.jqdemo');//找到要显示/隐藏的元素
        //$title.hide();   //如果你想默认是隐藏状态,可取消此行注释,下面两个切换函数换位
        $title.prev().toggle(function(){//为显示/隐藏元素的前一个元素(取出标题元素)设置点击切换事件
            $title.hide().prev().find('span').text('+');//第一次点击时,隐藏div元素,并找到标题元素中的span,切换按钮
        }, function(){
            $title.show().prev().find('span').text('-');//第二次点击时,显示div元素,并找到标题元素中的span,切换按钮
        });
        //jq的代码是不是简洁漂亮的多.哈哈.几句代码就搞定了.通过修改show()/hide()还可以得到很炫酷的效果
    });


js

    window.onload = function(){
        var divs = document.getelementsbytagname('div');//找到所有div元素
        for (var i = 0; i < divs.length; i++) {
            if (divs[i].classname != 'jsdemo')
                continue;//如果元素class值www.3ppt.com不是jsdemo,继续查找
            //divs[i].style.display='none';   //如果你想默认是隐藏状态,可取消此行注释
            var title = divs[i].previoussibling;//通过上一个元素定位到标题元素
            if (title.nodetype != 1) { //为了确保找到的是元素节点
                title = title.previoussibling;
            }
            title.next = divs[i]; //设置标题的next属性并指向div[i]
            title.onclick = function(){//点击事件
                var curstyle = this.next.style.display;//取div[i]的默认display值,现在知道title.next的用意了吧
                var newstyle;//定义新的display值
                var ico = title.getelementsbytagname('span')[0];//包含展开关闭按钮的节点
                if (curstyle == 'none') {//取反实现点击的展开关闭
                    newstyle = 'block';//当默认值是隐藏时,切换成可见
                    ico.innerhtml = '-';//切换展开关闭按钮
                }
                else {
                    newstyle = 'none';//当默认值是可见时,切换成隐藏
                    ico.innerhtml = '+';//切换展开关闭按钮
                };
           &n