<!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. Opencv on Ubuntu (from Ubuntu)

     OpenCV Introduction Contents Introduction Installation Step 1 Step 2 Running OpenCV Python in C I ...

  2. [Unity3D]Unity3D游戏开发之Unity与Android交互调用研究

    各位朋友,大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei.在前一篇文章中,我们研究了Android平台上Unity3D的手势操作并在之前的基础 ...

  3. UITableView刷新局部

    //局部section刷新 NSIndexSet *nd = [[NSIndexSet alloc] initWithIndex:1]; //刷新第二个section [self.tableView ...

  4. 浙江大学PAT考试1009~1012（1010上帝是冠军。。）

    哎,pat1010即使java书面,只有java书面,还增加了两个点,,.啊,智商捉佳,主要pat有些不给明确的范围.造成遐想空间.. 还是按顺序介绍.. 题目地址:http://pat.zju.ed ...

  5. JS判断字符串是否全为中文

    //第一种代码(全为中文则返回"true",不全为中文则返回"false"): <script language="javascript&quo ...

  6. ORACLE PL/SQL编程之六：把过程与函数说透(穷追猛打，把根儿都拔起!)

    原文:ORACLE PL/SQL编程之六:把过程与函数说透(穷追猛打,把根儿都拔起!) ORACLE PL/SQL编程之六: 把过程与函数说透(穷追猛打,把根儿都拔起!)   继上篇:ORACLE P ...

  7. Windows下Oracle不显示中文[已解决]

    跟着视频学习,然后讲到插入的时候有中文性别,就GG了,该显示中文的时候都是问号,觉得应该是编码的问题. 于是上网找了下,测试可行,方法如下 1,查询Oracle编码的语句: [sql] SELECT ...

  8. Visual Studio 2015 & C#6.0

      Visual Studio 2015 & C#6.0 试用报告,持续更新.   昨天早上看到了.net开源的消息,我是非常兴奋的,毕竟局限于Windows的.NET经常被人唾弃.VB暂且不 ...

  9. [译]Java 设计模式之外观

    (文章翻译自Java Design Pattern: Facade) 外观设计模式隐藏了任务的复杂性而只是提供了一个简单的接口.一个非常好的例子就是计算机的启动.当一个计算机启动的时候,它涉及CUP. ...

  10. Python框架之Django学习

    当前标签: Django   Python框架之Django学习笔记(十四) 尛鱼 2014-10-12 13:55 阅读:173 评论:0     Python框架之Django学习笔记(十三) 尛 ...