DIV点击折叠实例代码

废话不多说了，关键代码如下所示：

1. !doctyPE htML>     
2. html>     
3. head>     
4.     meta charset="utf-8">     
5.     meta content="width=device-width, inITial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">   
6.     title> 测试/title>     
7.     style type="text/css">   
8.         *{  margin:0;  padding:0; }   
9.         .menu{  width:100%; }   
10.         .menu .item{  width:100%;  height:auto;  background-color: #fefefe; }   
11.         .menu .item h1{  font-size:15px;  width:100%;  position:relative; }   
12.         .menu .item h1 i{  display: inline-block;  height:15px;  width:10px;  position:absolute;  rightright:10px;  top:0;  background: url(images/rightright.png) no-repeat;  background-size:10px auto; }   
13.         .menu .item ul{  display: none; }   
14.         .menu .item ul li{  list-style:none;  color:#000;  background-color: #fefefe;  border-bottom:solid 1px #ededed;  line-height: 32px;  width:100%;  position:relative; }   
15.         .menu .item ul li p{  display: none; }            
16.         .menu .item.active h1 i{  display: inline-block;  height:10px;  width:15px;  position:absolute;  rightright:10px;  top:3px;  background: url(images/down.png) no-repeat;  background-size:15px auto; }   
17.         .menu .item ul li span.icon{ display: inline-block;  height:15px;  width:10px;  position:absolute;  rightright:10px;  top:0;  background: url(images/rightright.png) no-repeat;  background-size:10px auto; }   
18.         .menu .item ul li.active span.icon{  display: inline-block;  height:10px;  width:15px;  position:absolute;  rightright:10px;  top:3px;  background: url(images/down.png) no-repeat;  background-size:15px auto; }   
19.         .menu .item.active ul{  display: block; }   
20.         .menu .item.active ul li.active p{  display: block; }   
21.     /style>   
22. /head>   
23. body>   
24.     div class="menu">   
25.         div class="item">   
26.             h1> 标题一i> /i> /h1>   
27.             ul>   
28.                 li> 1span class="icon"> /span>   
29.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
30.                 /li>   
31.                 li> 2span class="icon"> /span>   
32.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
33.                 /li>   
34.                 li> 3span class="icon"> /span>   
35.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
36.                 /li>   
37.             /ul>   
38.         /div>   
39.         div class="item">   
40.             h1> 标题二i> /i> /h1>   
41.             ul>   
42.                 li> 1span class="icon"> /span>   
43.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
44.                 /li>   
45.                 li> 2span class="icon"> /span>   
46.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
47.                 /li>   
48.                 li> 3span class="icon"> /span>   
49.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
50.                 /li>   
51.             /ul>   
52.         /div>   
53.         div class="item">   
54.             h1> 标题三i> /i> /h1>   
55.             ul>   
56.                 li> 1span class="icon"> /span>   
57.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
58.                 /li>   
59.                 li> 2span class="icon"> /span>   
60.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
61.                 /li>   
62.                 li> 3span class="icon"> /span>   
63.                     p> 锋科技了束带结发历史的会计法落实到飞/p>   
64.                 /li>   
65.             /ul>   
66.         /div>   
67.     /div>   
68.     script type="text/javascript" src="js/jquery-1.7.min.js"> /script>   
69.     script type="text/javascript">   
70.         jQuery(function(){   
71.             $('.menu .item').each(function(){   
72.                 VAR flag=true;   
73.                 $(this).find('h1').on('click',function(){   
74.                     if(flag){   
75.                         $('.menu .item').removeClass('active');   
76.                         $(this).parent('.item').addClass('active');                            
77.                         flag=false;   
78.                     } else{   
79.                         $(this).parent('.item').removeClass('active');   
80.                         flag=true;   
81.                     }   
82.                 } );   
83.             } );   
84.             $('.menu .item ul li').each(function(){        
85.                 var flag=true;                
86.                 $(this).on('click',function(event){   
87.                     event.preventDefault();   
88.                     event.stopPRopagation();   
89.                     if(flag){   
90.                         $('.menu ul li').removeClass('active');   
91.                         $(this).addClass('active');   
92.                         flag=false;   
93.                     } else{   
94.                         $(this).removeClass('active');   
95.                         flag=true;   
96.                     }                                    
97.                 } );   
98.             } );   
99.         } );   
100.     /script>   
101. /body>   
102. /html>   

好了，本文内容到此结束，希望对大家有所帮助！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！