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>