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=& ...

随机推荐

ftk学习记录（IME文章）
[声明:版权全部,欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 前面说的是全屏设置,还是请大家看一下效果图. watermark/2/text/aHR0cDovL ...
RegularExpressionValidator控件
原文:RegularExpressionValidator控件 ★搜Asp.net★(www.soAsp.net),为专业技术文档网站.包括Asp.net开发技术文档·C#开发技术文档·Access/ ...
jQuery数字加减插件
jQuery数字加减插件我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...
高速决心linux上oracle安装垃圾问题
问题:在linux安装oracle时间.因为oracle用户local LANG安装问题,原因安装oracle软件.该接口是非常多的安装位置是乱码. 解决方案:在oracle用户运行:export L ...
Asterisk 未来之路3.0_0005
原文:Asterisk 未来之路3.0_0005 第二章: Asterisk的架构 Asterisk 和其他众多传统的PBX是有区别的,拨号方案针对各种通道处理本质上采用同一种方式. 在传统的PB ...
Ubuntu加上一个命令搜索路径/etc/ environment
编辑~/.bashrc文件,然后在最后加上你想设置的目录就可以了. 这样做之后就可以在终端中执行你想要的程序了,不过如果你使用其它程序在后台调用的话可能还是会调用不到,因为这个设置是针对bash有效的 ...
POJ2533 Longest Ordered Subsequence 【最长递增子序列】
Longest Ordered Subsequence Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 32192 Acc ...
Linux解决：svn: Can't connect to host '*.*.*.*': 因为连接的方没有正确回答或连接在以后的时间
svn服务启动,在server在可使用命令将文件检查,但它不能检测其他计算机.已经提出: "svn: Can't connect to host '*.*.*.*': 因为连接方在一段时间后 ...
用javascript实现2048的小游戏
前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏 ...
CodeSmith开发系列资料总结
CodeSmith开发系列资料总结最近跟同事在研究CodeSmith,感觉中文文档是少之又少,所以我们自己写(翻译)了一些文档,总结如下,希望对使用CodeSmith的朋友有所帮助: “努力学习的熊 ...

JS左侧菜单-02

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

随机推荐

热门专题