以前写的一个小插件，刚好有空，就给整理一下。其中给document对象扩展了一个方法，就是根据class获取页面元素的集合，还有就是动态给元素注册事件。
下面是代码：
css代码
1 #main 2 { 3 width:150px; 4 float:left; 5 } 6 .title 7 { 8 background-color:Gray; 9 border:1px solid #333333; 10 height:24px; 11 text-align:center; 12 line-height:24px; 13 font-size:12px; 14 width:148px; 15 float:left; 16 cursor:pointer; 17 } 18 .item 19 { 20 text-align:center; 21 border:1px solid #333333; 22 float:left; 23 } 24 .item span 25 { 26 height:24px; 27 line-height:24px; 28 font-size:12px; 29 width:148px; 30 float:left; 31 }
html代码
1 1 <div id="main"> 2 2 <div class="title">浦东人民政府</div> 3 3 <div class="item"> 4 4 <span>财政局</span> 5 5 <span>审计局</span> 6 6 <span>档案局</span> 7 7 <span>商务委</span> 8 8 </div> 9 9 <div class="title">浦东人民政府</div> 10 10 <div class="item"> 11 11 <span>财政局</span> 12 12 <span>审计局</span> 13 13 <span>档案局</span> 14 14 <span>商务委</span> 15 15 </div> 16 16 <div class="title">浦东人民政府</div> 17 17 <div class="item"> 18 18 <span>财政局</span> 19 19 <span>审计局</span> 20 20 <span>档案局</span> 21 21 <span>商务委</span> 22 22 </div> 23 23 <div class="title">浦东人民政府</div> 24 24 <div class="item"> 25 25 <span>财政局</span> 26 26 <span>审计局</span> 27 27 <span>档案局</span> 28 28 <span>商务委</span> 29 29 </div> 30 30 <div class="title">浦东人民政府</div> 31 31 <div class="item"> 32 32 <span>财政局</span> 33 33 <span>审计局</span> 34 34 <span>档案局</span> 35 35 <span>商务委</span> 36 36 </div> 37 37 <div class="title">浦东人民政府</div> 38 38 <div class="item"> 39 39 <span>财政局</span> 40 40 <span>审计局</span> 41 41 <span>档案局</span> 42 42 <span>商务委</span> 43 43 </div> 44 44 </div>
js代码
1 //给document对象上扩展一个获取ClassName元素集合的方法 2 document.getElementsByClassName=function(ClassName){ 3 var obj=new Array();//声明一个数组，用于保存获取的class元素集合 4 var elements=document.getElementsByTagName('*'); 5 var reg=new RegExp("(^|//s)"+ClassName+"(//s|$)"); 6 for(var i=0;i<elements.length;i++){ 7 //循环所以的元素，用正则过滤出要找的class的元素 8 if(reg.test(elements[i].className)){ 9 //将获取的元素，压到数组中 10 obj.push(elements[i]); 11 } 12 } 13 return obj; 14 } 15 //toggle方法，用于点击菜单显示或者隐藏其下面的子节点 16 function toggle(objhandle,objHide){ 17 for(var i=0;i<objhandle.length;i++){ 18 //循环所以的父节点，给他们索引赋值 19 objhandle[i].selectedIndex=i; 20 //给所有的父节点注册onclick方法 21 objhandle[i].onclick=function(){ 22 var item=objHide[this.selectedIndex]; 23 //点击父节点，给相应父节点下面的子节点设置隐藏或者显示的属性 24 if(item.style.display=='block'||item.style.display==''){ 25 item.style.cssText='display:none;'; 26 }else{ 27 item.style.cssText='display:block;'; 28 } 29 } 30 } 31 } 32 33 window.onload=function(){ 34 //获取页面的元素结合 35 var title=document.getElementsByClassName('title'); 36 var item =document.getElementsByClassName('item'); 37 //调用toggle方法 38 toggle(title,item); 39 40 }
主要就是html里面可以随意添加节点或者删除节点，有更高需求的朋友可以自己拿去再改，有问题什么的可以联系我，互相学习嘛！o(∩_∩)o
