简易的点击展开/关闭效果(原生JS版和JQ版)

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

1. window.onload=function(){
2.     var divs=document.getElementsByTagName('div');//找到所有div元素
3.     for(var i=0; i<divs.length; i++){
4.         if(divs[i].className!='jsdemo') continue;//如果元素class值不是jsdemo,继续查找
5.         //divs[i].style.display='none';   //如果你想默认是隐藏状态,可取消此行注释
6.         var title=divs[i].previousSibling;//通过上一个元素定位到标题元素
7.         if(title.nodeType!=1){  //为了确保找到的是元素节点
8.             title=title.previousSibling;
9.         }
10.         title.next=divs[i]; //设置标题的next属性并指向div[i]
11.         title.onclick=function(){//点击事件
12.             var curStyle=this.next.style.display;//取div[i]的默认display值,现在知道title.next的用意了吧
13.             var newStyle;//定义新的display值
14.             var ico=title.getElementsByTagName('span')[0];//包含展开关闭按钮的节点
15.             if(curStyle=='none'){//取反实现点击的展开关闭
16.                 newStyle='block';//当默认值是隐藏时,切换成可见
17.                 ico.innerHTML='-';//切换展开关闭按钮
18.             }else{
19.                 newStyle='none';//当默认值是可见时,切换成隐藏
20.                 ico.innerHTML='+';//切换展开关闭按钮
21.             };
22.             title.next.style.display=newStyle;//为点击后的div[i]赋值
23.         }
24.     }
25. }

JQ版本:

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

转载于:https://www.cnblogs.com/mrthink/archive/2010/08/03/1790982.html