<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

 <html xmlns="http://www.111cn.net/1999/xhtml">

 <style type="text/css">

 body{

  margin:10px;

  padding:10px;

 }

 a:link { text-decoration: none;color: blue}

 a:active { text-decoration:blink}

 a:hover { text-decoration:underline;color: red}

 a:visited { text-decoration: none;color: green}

 body,td,div,span,li{

  font-size:12px;

 }

 .title01,.title02{

  color:#00b;

  font-weight:bold;

 }

 #DoorP{

  width:200px;

  height:300px;

  padding:0px;

  background:#FFFCF2;

 }

 .title01{

  width:100%;

  height:25px;

  background:#FFFCF2;

  cursor:pointer;

 }

 .title02{

  width:100%;

  height:25px;

  background:#FFFCF2;

  cursor:pointer;

 }

 .content{

  background:#FFFCF2;

  border-bottom:2px solid #fff;

  overflow:hidden;

  color:#666;

  padding-left:4px;

  padding-right:4px;

  line-height:18px;

 }

 .curved {

   width:202px;

   }

 .curved .b1, .curved .b2, .curved .b3, .curved .b4 {

   font-size:1px;

   display:block;

   background:#FFFCF2;

 overflow: hidden;

 }

 .curved .b1, .curved .b2, .curved .b3 {

   height:1px;

   }

 .curved .b2, .curved .b3, .curved .b4 {

   background:#FFFCF2;

   border-left:1px solid #C7BC98;

   border-right:1px solid #C7BC98;

   }

 .curved .b1 {

   margin:0 4px;

   background:#C7BC98;

   }

 .curved .b2 {

   margin:0 2px;

   border-width:0 2px;

   }

 .curved .b3 {

   margin:0 1px;

   }

 .curved .b4 {

   height:2px;

   margin:0;

   }

 .curved .c1 {

   margin:0 5px;

   background:#C7BC98;

   }

 .curved .c2 {

   margin:0 3px;

   border-width:0 2px;

   }

 .curved .c3 {

   margin:0 2px;

   }

 .curved .c4 {

   height:2px;

   margin: 0 1px;

   }

 .curved .boxcontent {

   display:block;

   background:transparent;

   border-left:1px solid #C7BC98;

   border-right:1px solid #C7BC98;

   font-size:0.9em;

   text-align:justify;

   }

 </style>

 <div class="curved">

  <b class="b1 c1"></b>

  <b class="b2 c2"></b>

  <b class="b3 c3"></b>

  <b class="b4 c4"></b>

   <div class="boxcontent">

 <div id="DoorP">

  <table>

   <tr>

    <td align="center">

      第一层信息

    </td>

   </tr>

  </table>

  <div class="content" align="center">

   <a href="#">二层</a><br/>

   二层<br/>

   二层<br/>

  </div>

     <b class="b1"></b>

     <b class="b2"></b>

     <b class="b3"></b>

     <b class="b4"></b>  

  <table>

   <tr>

    <td align="center">

     第二层信息

    </td>

   </tr>

  </table>

 <div class="content" align="center">

   <a href="#">二层</a><br/>

   二层<br/>

   二层<br/>

  </div>

     <b class="b1"></b>

     <b class="b2"></b>

     <b class="b3"></b>

     <b class="b4"></b> 

  <table>

   <tr>

    <td align="center">

     第三层信息

    </td>

   </tr>

  </table>

 <div class="content" align="center">

   <a href="#">二层</a><br/>

   二层<br/>

   二层<br/>

  </div>

 </div></div>

  <b class="b4 c4"></b>

  <b class="b3 c3"></b>

  <b class="b2 c2"></b>

  <b class="b1 c1"></b>

 <script type="text/javascript">

  var open = 2;

  var openState = new Array();

  var closeState = new Array();

  var dH = 220;

  function $(id){

   if(document.getElementById(id))

   {

    return document.getElementById(id);

   }

   else

   {

    alert("没有找到!");

   }

  }

  function $tag(id,tagName){

   return $(id).getElementsByTagName(tagName)

  }

  function closeMe(Cid,Oid){

   var h = parseInt(Ds[Cid].style.height);

   //alert(h);

   if(h > 2)

   {

    h = h - Math.ceil(h/3);

    Ds[Cid].style.height = h+"px";

   }

   else

   {  

    openMe(Oid);

    clearTimeout(closeState[Cid]);

    return false;

   }

   closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");

  }

  function openMe(Oid){

   var h = parseInt(Ds[Oid].style.height);

   //alert(h);

   if(h < dH)

   {

    h = h + Math.ceil((dH-h)/3);

    Ds[Oid].style.height = h+"px";

   }

   else

   {

    clearTimeout(openState[Oid]);

    return false;

   }

   openState[Oid] = setTimeout("openMe("+Oid+")");

  }

  var Ds = $tag("DoorP","div");

  var Ts = $tag("DoorP","table");

  if(Ds.length != Ts.length)

  {

   alert("标题和内容数目不相同!");

  }

  for(var i = 0 ; i < Ds.length ; i++)

  {

   if(i==open)

   {

    Ds[i].style.height = dH+"px";

    Ts[i].className="title01";

   }

   else

   {

    Ds[i].style.height = "0px";

    Ts[i].className="title02";

   }

   Ts[i].value = i;

   Ts[i].onmouseover = function(){

    if(open==this.value)

    {

     return false;

    }

    Ts[open].className="title02";

    Ts[this.value].className="title01";

    for(var i = 0 ; i < openState.length ; i++)

    {

     clearTimeout(openState[i]);

     clearTimeout(closeState[i]);

    }

    closeMe(open,this.value);

    //openMe(this.value);

    open = this.value;

   }

  }

  function showDiv(id){

   Ds[id].style.height=dH+"px";

   Ds[open].style.height="0px";

   open = id;

  }

 </script>

 更多详细内容请查看：http://www.111cn.net/js_a/76/33038.htm

JS左侧菜单-02的更多相关文章

  1. JS左侧菜单-03

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS左侧菜单-04

    <script language="javascript" type="text/javascript"> function HideShow() ...

  3. JS练习题（左侧菜单下拉+好友选中）

    题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...

  4. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  5. python : jquery实现左侧菜单

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  6. 使用layui-tree美化左侧菜单，点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  7. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  8. jquery左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. 在遍历中使用 iterator/reverse_iterator 进行 Erase 的使用方法

    在遍历中使用 iterator/reverse_iterator 进行 Erase 的使用方法 罗朝辉 (http://blog.csdn.net/kesalin/) 本文遵循"署名-非商业 ...

  2. 通俗易懂地解决中文乱码问题（2） --- 分析解决Mysql插入移动端表情符报错 ‘incorrect string value: '\xF0...

    原文:[原创]通俗易懂地解决中文乱码问题(2) --- 分析解决Mysql插入移动端表情符报错 'incorrect string value: '\xF0... 这篇blog重点在解决问题,如果你对 ...

  3. ShellExecute函数简单说明

    平时在delphi写代码的过程中总是能遇到ShellExecute函数,于是索性将它的使用方法整理一下,由于我在微软的站点上也没能查到个详解(当然我查的中文版,俺菜嘛) ShellExecute函数原 ...

  4. win7访问xp共享访问不了

    这个问题不是一天两天了,经历几次了,所以记下来. 1. 一些XP对用户权限作了特殊的优化设置.限制了只有guest用户才能用于做局域网共享用户. 2. 大多数时候,需要设置一个密码,才能用于访问. 3 ...

  5. HDU 1256 图片8

    图片8 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  6. PHP Warning: strtotime(): It is not safe to rely on the system's timezone settings.

    有三种解决办法: 1. php文件中设置时区 <?php date_default_timezone_set('Asia/Shanghai'); echo strtotime('2012-9-3 ...

  7. NHibernate-Generator主键生成方式

    NHibernate之Generator主键生成方式   (1) assigned主键由外部程序负责生成,无需NHibernate参与. (2) hilo通过hi/lo 算法实现的主键生成机制,需要额 ...

  8. JQuery slideToggle 演示简单的 Slide Panel 效果。

    ------------------html--------------------------------- <html xmlns="http://www.w3.org/1999/ ...

  9. Codeforces 10D LCIS 找出最长公共子和产量增加这个序列 dp

    主题链接:点击打开链接 意甲冠军: 特定n长序列 给定k长序列 求LCIS并输出这个子序列 如有多解输出随意解.. = - = 敲的时候听着小曲儿pre的含义还没有想清楚,万万没想到就过了... #i ...

  10. MVC 过滤器3

    ASP.NET MVC 过滤器(三) ASP.NET MVC 过滤器(三) 前言 本篇讲解行为过滤器的执行过程,过滤器实现.使用方式有AOP的意思,可以通过学习了解过滤器在框架中的执行过程从而获得一些 ...