HTML展开折叠div代码

HTML展开折叠div代码

  1 
  2 <!DOCTYPE html>
  3 <html>
  4     <head>
  5         <meta charset="utf-8">
  6         <title>纯CSS实现百叶窗</title>
  7         <style type="text/css">
  8             * {
  9                margin: 0;
 10                padding: 0;
 11                }
 12             
 13             #parent >li> span{background: #999999;display: block;width: 200px;border:1px solid #ECEEF2;}
 14             li {line-height: 40px;display: block;}
 15             li  p{
 16                     display: inline-block;
 17                     width: 0px;
 18                     height: 0px;
 19                     border-left: 5px solid transparent;
 20                     border-right: 5px solid transparent;
 21                     border-top: 5px solid#2f2f2f;
 22                       }
 23              li>ul{display: none;}
 24              li>ul>li{border: 1px solid #DEDEDE;width: 199px;}
 25              #parent span:hover + ul{display: block;}
 26              #parent span:hover >p{
 27                      display: inline-block;
 28                     width: 0px;
 29                     height: 0px;
 30                     border-top: 5px solid transparent;
 31                     border-bottom: 5px solid transparent;
 32                     border-left: 5px solid#2f2f2f;}
 33         </style>
 34     </head>
 35     <body>
 36         <ul id="parent">
 37             <li>
 38                 <span><p></p>列表</span>
 39                 <ul>
 40                     <li>子列表</li>
 41                     <li>子列表</li>
 42                     <li>子列表</li>
 43                 </ul>
 44             </li>
 45             <li>
 46                 <span><p></p>列表</span>
 47                 <ul>
 48                     <li>子列表</li>
 49                     <li>子列表</li>
 50                     <li>子列表</li>
 51                 </ul>
 52             </li>
 53             <li>
 54                 <span><p></p>列表</span>
 55                 <ul>
 56                     <li>子列表</li>
 57                     <li>子列表</li>
 58                     <li>子列表</li>
 59                 </ul>
 60             </li>
 61         </ul>
 62    
 63 
 64 <table border="0" cellspacing="0" cellpadding="0">
 65   <tr>
 66     <td scope="row">
 67     
 68     <table border="1">
 69       <tr>
 70         <td id="showbfq" height="20" align="top"  onclick="if(bfq.style.display=='none'){bfq.style.display='';showbfq.innerText='优质';}
 71  else{bfq.style.display='none';showbfq.innerText='点击更多';}">点击更多</td>
 72       </tr>
 73       <tr>
 74         <td height="80" align="center" name="bfq" id="bfq" style="display:none;">aaa1111111111111111111111111</td>
 75       </tr>
 76     </table>
 77     
 78     </td></tr>
 79     <tr><td>
 80     
 81     <table border="1">
 82       <tr>
 83         <td id="showbfq1" height="20" align="top"  onclick="if(bfq1.style.display=='none'){bfq1.style.display='';showbfq1.innerText='优质';}
 84  else{bfq1.style.display='none';showbfq1.innerText='点击更多';}">点击更多</td>
 85       </tr>
 86       <tr>
 87         <td height="80" align="center" name="bfq1" id="bfq1" style="display:none;">bbb2222222222222222222222</td>
 88       </tr>
 89     </table>
 90     
 91     </td></tr>
 92     <tr><td>
 93     
 94     <table border="1">
 95       <tr>
 96         <td id="showbfq2" height="20" align="top"  onclick="if(bfq2.style.display=='none'){bfq2.style.display='';showbfq2.innerText='折叠';}
 97  else{bfq2.style.display='none';showbfq2.innerText='展开';}">展开</td>
 98       </tr>
 99       <tr>
100         <td height="80" align="center" name="bfq2" id="bfq2" style="display:none;">ccc3333333333333333333333333</td>
101       </tr>
102     </table>
103     
104     </td></tr>
105 </table>
106 
107 <!-- js 控制 展开 隐藏div  -->
108 <div style="BORDER-BOTTOM: black 2px solid; " >
109 <img src="image/down.png" onclick="test(this)">标题内容   <!--this 指 img 对象  -->
110 </div>
111 <div id="div2" style="border:1px solid #ccc; width:300px; height:200px; display: block;">
112     (1)每个HTML标记都有事件句柄属性。onClick是HTML标记属性,不分大小写。
113     (2)HTML标记对应的元素对象也具有事件句柄属性,这个属性必须全小写,因JS区分大小写
114 </div>
115 </body>
116 </html>
117 <script type="text/javascript">
118 function test(obj){
119 
120     var div1=document.getElementById("div2");
121     if(div1.style.display=="block"){
122         div1.style.display="none";
123         obj.src="image/up.png";
124     }else{
125         div1.style.display="block";
126         obj.src="image/down.png";
127     }
128 }
129 </script>

posted on 2018-12-24 11:01 青蛙學堂 阅读(2948) 评论(0)  编辑 收藏 引用 所属分类: HTMLCSSJavaScript

只有注册用户登录后才能发表评论。
<2018年12月>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

导航

统计

常用链接

留言簿(8)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜