你所在位置:首页Javascript开发 → js写的一款手风琴插件

js写的一款手风琴插件

发布时间:2019-06-12

以前写的一个小插件,刚好有空,就给整理一下。其中给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("(^
上一篇:javascript数组去重复
下一篇:javascript学习笔记(十一)正则表达式