JS左侧菜单-02

  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  200px;
 21  height:300px;
 22  padding:0px;
 23  background:#FFFCF2;
 24 }
 25 .title01{
 26  100%;
 27  height:25px;
 28  background:#FFFCF2;
 29  cursor:pointer;
 30 }
 31 .title02{
 32  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   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-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-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