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=& ...
随机推荐
- 【SSH三大框架】Hibernate基础第六篇：多对一关联关系的映射、分析及加入、查询
这里举样例用的是:部门与员工的关系. 一个部门能够相应多个员工,这就是非常明显的多对一关联关系. 我们须要建立两个实体类:员工(Employee).部门(Department) 员工类:Employe ...
- DevExpress asp.net 导出Excel 自动开启迅雷问题，默认保存为aspx页面
目前采取曲线救国策略: 利用MVC ..... <dx:ASPxGridView ID="ASPxGridView1" runat="server" Au ...
- C控制语句--分支和跳转
/*C控制语句--分支和跳转*/ /*关键字 if else switch continue break case default goto 运算符:&&(且) ||(或) ?:(三元 ...
- JAVA学习第三十四课 (经常使用对象API)—List集合及其子类特点
整个集合框架中最经常使用的就是List(列表)和Set(集) 一.List集合 && Set的特点 Collection的子接口: 1.List:有序(存入和取出的顺序一致),元素都有 ...
- web学习总结之布局
浅谈web布局中的“float”属性 对于刚学习web前端的同学,布局和排版都是一个难点.虽然我们能够通过各种调试实现我们希望得到的页面效果,但是如果不把其中的道理弄清楚的话,在下次布局的时候,也无法 ...
- JS自动化测试 单元测试之Qunit
前言 因为公司开发了一套javascript SDK需要测试,在网上找了很久,找到了JQuery团队开发的QUnit,和基于JUnit的JsUnit,还有一些还没有看,先讲讲QUnit吧 下载 登录J ...
- DDD分层架构之仓储
DDD分层架构之仓储(层超类型基础篇) 前一篇介绍了仓储的基本概念,并谈了我对仓储的一些认识,本文将实现仓储的基本功能. 仓储代表聚合在内存中的集合,所以仓储的接口需要模拟得像一个集合.仓储中有很多操 ...
- c语言内存对齐（1）
在<C陷阱与缺陷>有这样一个例子: #include <stdio.h> int main(void) { int i; char c; ;i<;i++){ scanf( ...
- SQLCMD的介绍
原文:SQLCMD的介绍 sqlcmd -S SERVERNAME -U USERNAME -P PASSWORD -i filename.sql 下面的内容是详细介绍sqlcmd的,有兴趣的朋友可以 ...
- JavaScipt中对DOM的理解
一.理解DOM 浏览器通过文档对象模型DOM使JavaScript程序可以访问页面上的元素,而DOM是页面上XHTML中文档正文标题.段落.列表.样式ID.class以及所有其他出现的数据的一个内部表 ...