JS左侧菜单-02

 <!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的更多相关文章

JS左侧菜单-03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS左侧菜单-04
<script language="javascript" type="text/javascript"> function HideShow() ...
JS练习题（左侧菜单下拉+好友选中）
题一.左侧菜单下拉做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...
亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
使用layui-tree美化左侧菜单，点击生成tab选项
layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...
LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
jquery左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jquery实现全选，取消，反选的功能&实现左侧菜单
1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

Java设计模式（八）观察者模式迭代器模式
(十五)观察者模式观察者模式,定义对象间一对多关系,一个对象状态发生改变,全部依赖于它的对象都收到通知而且自己主动更新,观察者与被观察者分开.比如邮件订阅.RSS订阅,假设有更新就会邮件通知你. i ...
[Android]Parcelable encountered IOException writing serializable object (name = xxx)
Activity之间通过Intent传递值,支持基本数据类型和String对象及它们的数组对象byte.byte[].char.char[].boolean.boolean[].short.short ...
UI 收集
semantic http://www.semantic-ui.com.cn/modules/reveal.html sbadmin http://startbootstrap.com/templat ...
Access denied for user: 'root@localhost' (Using password: YES)
centos 设备mysql成功后首次使用root登录发生:Access denied for user: 'root@localhost' (Using password: YES) 因为mysq ...
多线程学习之三生产者消费者模式Guarded Suspension
Guarded Suspension[生产消费者模式] 一:guarded suspension的参与者--->guardedObject(被防卫)参与者 1.1该 ...
使用 COM 风格的编程接口
使用COM 风格的编程接口假设不直接使用 COM 库.不创建自己的包装.那么更可能的是使用 COM 风格的编程接口.这是由于如今很多开发商公布应用程序时.提供了首选的互操作程序集(Primary I ...
Aspose.Words：如何添加另一个WORD文档中的Node对象
原文:Aspose.Words:如何添加另一个WORD文档中的Node对象首先看一段代码,这段代码意图从docSource中获取第一个表格,并插入docTarget的末尾: , true); doc ...
增加VMWare开机画面时间，来防止快速跳过而无法进入BIOS
用记事本打开xx.vmx,在里面添加一行: bios.bootDelay = "30000" 意思是开机后,在开机画面里停留30秒.
基于NHibernate二级缓存的MongoDB组件
设计一套基于NHibernate二级缓存的MongoDB组件(上) 摘要:NHibernate Contrib 支持很多第三方的二级缓存,如SysCache,MemCache,Prevalence ...
C语言链表操作模板(添加,删除,遍历,排序)
C语言链表操作模板,摘自郝斌的C语言视频教程,简单的修改成了纯C格式.当年照着视频学习的时候记录下来的,在使用的时候直接拿来修改修改修改能节约不少时间的. /********************* ...

JS左侧菜单-02

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

随机推荐

热门专题