js写的一款手风琴插件

以前写的一个小插件，刚好有空，就给整理一下。其中给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].οnclick=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.οnlοad=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

转载于:https://www.cnblogs.com/Suven/archive/2012/06/02/2531560.html