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

随机推荐

easyui datagrid 单元格编辑自动聚焦、全选
$.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var ...
WebBrowser控件的简单应用2
原文:WebBrowser控件的简单应用2 第一个简单应用里面讲述的是如何模拟调用当前网页的元素的事件或者赋值/取值.这次的应用讲述的是1:如何处理弹出新页面的事件(总是在我的浏览器里面现实新页面)2 ...
javascript1
<script> //初始化表达式:通过方括号定义数组元素和通过花括号定义对象属性名和属性值之间的映射关系的语法 //通过“.”和“[]”来引用对象属性或数组元素的值就构成一个表达式. v ...
Phpstorm配置phpunit对php进行单元测试
在 phpstorm 中配置 php 项目的单元测试,项目使用 Composer 进行管理,为了避免在项目中直接引入 phpunit 相关代码包,使项目的 vendor 目录变得臃肿,这里采用全局安装 ...
日志之再说Log4J
网上关于LOG4J的使用文章太多了,写这篇文章的目的一方面是为了回顾LOG4J的用法,一方面针对配置的使用自动将日志插入数据库,自动发送邮件,还有就是自定义输入实现.后续文章会总结下从LOG4J到LO ...
Java程序单元测试工具对比——Parasoft Jtest与Junit
Web应用程序开发中,面向对象的Java语言占了不少的比重.对于Java应用程序的测试方法或方式多种多样,比较典型的是程序员自己来完成程序测试中的一个部分——单元测试. 之前,慧都资讯提到单元测试是程 ...
android数据库升级的措辞
在基类table增加upgrade操作: public abstract class DbBaseTable { private static final String TAG = "DbB ...
C语言身份证信息查询系统（修改版）
很久以前写了一个<C语言身份证信息查询系统>,如果你点击链接进去看了. 估计也会被我那磅礴大气的代码震惊到的,最近复习/学习文件操作,把代码改了改,算是对以前还不会文件操作的时候的愿望,哈 ...
leetcode第十题--Regular Expression Matching
Problem:Implement regular expression matching with support for '.' and '*'. '.' Matches any single c ...
大约PF_RING/Intel 82599/透明VPN一些事
接近崩溃的边缘,如今,在医院这篇文章地方的想法,小病,我宁愿不吃药瓶.一台笔记本电脑,但无法上网,我不称职.想知道的东西.唯一可用3G,不开的热点.由于没人给我报销流程.这个周末,我只有一天,由于下雨 ...

JS左侧菜单-02

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

随机推荐

热门专题