1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
2 <html xmlns="http://www.111cn.net/1999/xhtml">
3 <style type="text/css">
4 body{
5 margin:10px;
6 padding:10px;
7 }
8 a:link { text-
decoration: none;color: blue}
9 a:active { text-
decoration:blink}
10 a:hover { text-
decoration:underline;color: red}
11 a:visited { text-
decoration: none;color: green}
12 body,td,div,span,li{
13 font-
size:12px;
14 }
15 .title01,.title02{
16 color:#00b;
17 font-
weight:bold;
18 }
19 #DoorP{
20 width:200px;
21 height:300px;
22 padding:0px;
23 background:#FFFCF2;
24 }
25 .title01{
26 width:100%
;
27 height:25px;
28 background:#FFFCF2;
29 cursor:pointer;
30 }
31 .title02{
32 width:100%
;
33 height:25px;
34 background:#FFFCF2;
35 cursor:pointer;
36 }
37 .content{
38 background:#FFFCF2;
39 border-
bottom:2px solid #fff;
40 overflow:hidden;
41 color:#666
;
42 padding-
left:4px;
43 padding-
right:4px;
44 line-
height:18px;
45 }
46 .curved {
47 width:202px;
48 }
49 .curved .b1, .curved .b2, .curved .b3, .curved .b4 {
50 font-
size:1px;
51 display:block;
52 background:#FFFCF2;
53 overflow: hidden;
54 }
55 .curved .b1, .curved .b2, .curved .b3 {
56 height:1px;
57 }
58 .curved .b2, .curved .b3, .curved .b4 {
59 background:#FFFCF2;
60 border-
left:1px solid #C7BC98;
61 border-
right:1px solid #C7BC98;
62 }
63 .curved .b1 {
64 margin:0
4px;
65 background:#C7BC98;
66 }
67 .curved .b2 {
68 margin:0
2px;
69 border-width:0
2px;
70 }
71 .curved .b3 {
72 margin:0
1px;
73 }
74 .curved .b4 {
75 height:2px;
76 margin:0
;
77 }
78 .curved .c1 {
79 margin:0
5px;
80 background:#C7BC98;
81 }
82 .curved .c2 {
83 margin:0
3px;
84 border-width:0
2px;
85 }
86 .curved .c3 {
87 margin:0
2px;
88 }
89 .curved .c4 {
90 height:2px;
91 margin: 0
1px;
92 }
93 .curved .boxcontent {
94 display:block;
95 background:transparent;
96 border-
left:1px solid #C7BC98;
97 border-
right:1px solid #C7BC98;
98 font-size:0
.9em;
99 text-
align:justify;
100 }
101 </style>
102 <div class="curved">
103 <b class="b1 c1"></b>
104 <b class="b2 c2"></b>
105 <b class="b3 c3"></b>
106 <b class="b4 c4"></b>
107 <div class="boxcontent">
108 <div id="DoorP">
109 <table>
110 <tr>
111 <td align="center">
112 第一层信息
113 </td>
114 </tr>
115 </table>
116 <div class="content" align="center">
117 <a href="#">二层</a><br/>
118 二层<br/>
119 二层<br/>
120 </div>
121 <b class="b1"></b>
122 <b class="b2"></b>
123 <b class="b3"></b>
124 <b class="b4"></b>
125
126 <table>
127 <tr>
128 <td align="center">
129 第二层信息
130 </td>
131 </tr>
132 </table>
133 <div class="content" align="center">
134 <a href="#">二层</a><br/>
135 二层<br/>
136 二层<br/>
137 </div>
138
139 <b class="b1"></b>
140 <b class="b2"></b>
141 <b class="b3"></b>
142 <b class="b4"></b>
143
144 <table>
145 <tr>
146 <td align="center">
147 第三层信息
148 </td>
149 </tr>
150 </table>
151 <div class="content" align="center">
152 <a href="#">二层</a><br/>
153 二层<br/>
154 二层<br/>
155 </div>
156 </div></div>
157 <b class="b4 c4"></b>
158 <b class="b3 c3"></b>
159 <b class="b2 c2"></b>
160 <b class="b1 c1"></b>
161 <script type="text/javascript">
162 var open = 2
;
163 var openState =
new Array();
164 var closeState =
new Array();
165 var dH = 220
;
166 function $(id){
167 if(document.getElementById(id))
168 {
169 return document.getElementById(id);
170 }
171 else
172 {
173 alert("没有找到!"
);
174 }
175 }
176 function $tag(id,tagName){
177 return $(id).getElementsByTagName(tagName)
178 }
179 function closeMe(Cid,Oid){
180 var h =
parseInt(Ds[Cid].style.height);
181 //alert(h);
182 if(h > 2
)
183 {
184 h = h - Math.ceil(h/3);
185 Ds[Cid].style.height = h+"px"
;
186 }
187 else
188 {
189
190 openMe(Oid);
191 clearTimeout(closeState[Cid]);
192 return false;
193 }
194 closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"
);
195 }
196 function openMe(Oid){
197 var h =
parseInt(Ds[Oid].style.height);
198 //alert(h);
199 if(h <
dH)
200 {
201 h = h + Math.ceil((dH-h)/3);
202 Ds[Oid].style.height = h+"px"
;
203 }
204 else
205 {
206 clearTimeout(openState[Oid]);
207 return false;
208 }
209 openState[Oid] = setTimeout("openMe("+Oid+")"
);
210 }
211 var Ds = $tag("DoorP","div"
);
212 var Ts = $tag("DoorP","table"
);
213 if(Ds.length !=
Ts.length)
214 {
215 alert("标题和内容数目不相同!"
);
216 }
217
218 for(
var i = 0 ; i < Ds.length ; i++
)
219 {
220 if(i==
open)
221 {
222 Ds[i].style.height = dH+"px"
;
223 Ts[i].className="title01"
;
224 }
225 else
226 {
227 Ds[i].style.height = "0px"
;
228 Ts[i].className="title02"
;
229 }
230 Ts[i].value =
i;
231 Ts[i].onmouseover =
function(){
232 if(open==
this.value)
233 {
234 return false;
235 }
236 Ts[open].className="title02"
;
237 Ts[
this.value].className="title01"
;
238 for(
var i = 0 ; i < openState.length ; i++
)
239 {
240 clearTimeout(openState[i]);
241 clearTimeout(closeState[i]);
242 }
243 closeMe(open,
this.value);
244 //openMe(this.value);
245 open =
this.value;
246 }
247 }
248 function showDiv(id){
249 Ds[id].style.height=dH+"px"
;
250 Ds[open].style.height="0px"
;
251 open =
id;
252 }
253 </script>
254 更多详细内容请查看：http:
//www.111cn.net/js_a/76/33038.htm
转载于:https://www.cnblogs.com/yinyuejie/p/3210151.html
相关资源：js左侧菜单栏样式
