Javascript 展开收起 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>展开收起</title>
 6 <style type="text/css">
 7 body{
 8     margin: 0 auto;
 9     padding: 0px;
10 }
11 #pn{
12     background: #e8e8e8;
13     width: 600px;
14     height: auto;
15     margin: 0 auto;
16     padding: 5px;
17     font-size: 9pt;
18 }
19 .slide{
20     margin: 0;
21     padding: 0;
22     width: 600px;
23     border-top: solid 4px gray;
24     margin: 0 auto;
25 }
26 .btn-slide{
27     background: gray;
28     text-decoration: none;
29     text-align: center;
30     width: 120px;
31     height: 30px;
32     padding: 10px 0 0 0;
33     display: block;
34     color: #FFF;
35     margin: 0 auto;
36 }
37 </style>
38 <script type="text/javascript">
39     function showdiv() {//展开函数
40         document.getElementById('hpn').style.display="block";
41         document.getElementById('strHref').innerHTML="收起";
42         document.getElementById('strHref').href="javascript:hidediv()";
43     }
44     function hidediv() {//收起函数
45         document.getElementById('hpn').style.display="none";
46         document.getElementById('strHref').innerHTML="展开";
47         document.getElementById('strHref').href="javascript:showdiv()";   
48     }
49 </script>
50 </head>
51 <body>
52     <div id="pn">
53         <p>
54             手机 - 商品筛选</p>
55         <p>
56             网络：移动4G 联通3G 电信3G</p>
57         <div id="hpn" style="display: none">
58             <p>
59                 价格：5000元以上 4000-4999 3000元以下</p>
60             <p>
61                 特点：0元购机 防水 长待机</p>
62         </div>
63     </div>
64     <p class="slide">
65         <a href="javascript:showdiv()" id="strHref" class="btn-slide">展开</a>    <!--点击按钮-->
66     </p>
67 </body>
68 </html>

 

posted @ 2017-08-21 14:03  wǒの湁茡潞釦﹌  阅读(163)  评论(0)    收藏  举报