以前寫的一個小插件，剛好有空，就給整理一下。其中給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 <p id="main">
2 2 <p class="title">浦東人民政府</p>
3 3 <p class="item">
4 4 <span>財政局</span>
5 5 <span>審計局</span>
6 6 <span>檔案局</span>
7 7 <span>商務委</span>
8 8 </p>
9 9 <p class="title">浦東人民政府</p>
10 10 <p class="item">
11 11 <span>財政局</span>
12 12 <span>審計局</span>
13 13 <span>檔案局</span>
14 14 <span>商務委</span>
15 15 </p>
16 16 <p class="title">浦東人民政府</p>
17 17 <p class="item">
18 18 <span>財政局</span>
19 19 <span>審計局</span>
20 20 <span>檔案局</span>
21 21 <span>商務委</span>
22 22 </p>
23 23 <p class="title">浦東人民政府</p>
24 24 <p class="item">
25 25 <span>財政局</span>
26 26 <span>審計局</span>
27 27 <span>檔案局</span>
28 28 <span>商務委</span>
29 29 </p>
30 30 <p class="title">浦東人民政府</p>
31 31 <p class="item">
32 32 <span>財政局</span>
33 33 <span>審計局</span>
34 34 <span>檔案局</span>
35 35 <span>商務委</span>
36 36 </p>
37 37 <p class="title">浦東人民政府</p>
38 38 <p class="item">
39 39 <span>財政局</span>
40 40 <span>審計局</span>
41 41 <span>檔案局</span>
42 42 <span>商務委</span>
43 43 </p>
44 44 </p>
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
作者 Suvens