朋友的项目正好需要一个抽屉效果的js代码，现写了一段，主要是通过判断所需要的收缩/展开的样式，控制display样式的值。调用方法为”switchState(this, i);i为当前menu的顺序；后来又一次改进的方法是自动获取i(当前元素在父容器的顺序)。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
<!--
* { margin:0; padding:0; font-size:12px; font-weight:normal; }
#drawer { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }
#drawer h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }
li {list-style-type:none;}
#links_ {margin:-20px 0 0 50px; color:blue; cursor:pointer; text-decoration:underline;}
/* required, other css lines are optional*/
.drawerS_ { display:block; }
.drawerS { display:none; }
-->
</style>
<script type="text/javascript">
//global param
var showStyleName = "drawerS_";
var hideStyleName = "drawerS";
function showAll(hide)
{
var allOl = document.getElementById("drawer").getElementsByTagName('ol');
var targetClass = hideStyleName;
if(!hide)
targetClass = showStyleName;
for(var i = 0;i < allOl.length;i++)
{
allOl[i].className = targetClass;
}
}
function switchState(obj, i)
{
var selmenu = obj.parentNode.getElementsByTagName('ol')[i];
if(selmenu.className == hideStyleName)
selmenu.className = showStyleName
else
selmenu.className=hideStyleName;
}
</script>
</HEAD>
<BODY>
<div id="drawer">
<h4 onclick="switchState(this, 0);">Menu 1</h4>
<ol>
<li>Sub Menu 1</li>
<li>Sub Menu 1</li>
</ol>
<h4 onclick="switchState(this, 1);">Menu 2</h4>
<ol>
<li>Sub Menu 2</li>
<li>Sub Menu 2</li>
</ol>
<h4 onclick="switchState(this, 2);">Menu 3</h4>
<ol>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
</ol>
<h4 onclick="switchState(this, 3);">Menu 4</h4>
<ol>
<li>Sub Menu 4</li>
<li>Sub Menu 4</li>
<li>Sub Menu 4</li>
</ol>
</div>
<div id="links_"><a onclick="showAll();">Expand All</a> / <a onclick="showAll('^_^');">Hide All</a></div>
<script language="JavaScript">showAll("*o*");</script>
</BODY>
</HTML>
基本上达到了所需要的抽屉效果，但是在调用的时候，每次都要通过指定需要展开的sub menu的index，查阅了一些资料，发现可以通过event来获取当前event的target，进而获得一些自己需要的信息，我需要target的所有同级别的html元素集合(通过“target.爸.儿子”来实现)、target在同级别元素集合中的index。修改后的代码为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
<!--
* { margin:0; padding:0; font-size:12px; font-weight:normal; }
#drawer { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }
#drawer h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }
li {list-style-type:none;}
#links_ {margin:-20px 0 0 50px; color:blue; cursor:pointer; text-decoration:underline;}
/* required, other css lines are optional*/
.drawerS_ { display:block; }
.drawerS { display:none; }
-->
</style>
<script type="text/javascript">
//global param
var showStyleName = "drawerS_";
var hideStyleName = "drawerS";
function showAll(hide)
{
var allOl = document.getElementById("drawer").getElementsByTagName('ol');
var targetClass = hideStyleName;
if(!hide)
targetClass = showStyleName;
for(var i = 0;i < allOl.length;i++)
{
allOl[i].className = targetClass;
}
}
function switchState(e)
{
e = window.event || e;
var targetObj = e.target || e.srcElement;
var collectionMenus = targetObj.parentNode.getElementsByTagName('h4');
var i= 0;
while(collectionMenus[i]){
tem = collectionMenus[i++];
if(tem == targetObj) break;
}
var selmenu = targetO
bj.parentNode.getElementsByTagName('ol')[i-1];
if(selmenu.className == hideStyleName)
selmenu.className = showStyleName
else
selmenu.className=hideStyleName;
}
</script>
</HEAD>
<BODY>
<div id="drawer">
<h4 onclick="switchState();">Menu 1</h4>
<ol>
<li>Sub Menu 1</li>
<li>Sub Menu 1</li>
</ol>
<h4 onclick="switchState();">Menu 2</h4>
<ol>
<li>Sub Menu 2</li>
<li>Sub Menu 2</li>
</ol>
<h4 onclick="switchState();">Menu 3</h4>
<ol>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
</ol>
<h4 onclick="switchState();">Menu 4</h4>
<ol>
<li>Sub Menu 4</li>
<li>Sub Menu 4</li>
<li>Sub Menu 4</li>
</ol>
</div>
<div id="links_"><a onclick="showAll();">Expand All</a> / <a onclick="showAll('^_^');">Hide All</a></div>
<script language="JavaScript">showAll("*o*");</script>
</BODY>
</HTML>
在event的处理上，firefox跟IE有一定的差别，修改一下调用方法来解决这个兼容性问题：
<div id="drawer">
<h4 onclick="switchState(event);">Menu 1</h4>
<ol>
<li>Sub Menu 1</li>
<li>Sub Menu 1</li>
</ol>
<h4 onclick="switchState(event);">Menu 2</h4>
<ol>
<li>Sub Menu 2</li>
<li>Sub Menu 2</li>
</ol>
<h4 onclick="switchState(event);">Menu 3</h4>
<ol>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
<li>Sub Menu 3</li>
</ol>
....
参考文章：
http://www.webdeveloper.com/forum/showthread.php?t=177063
http://dudu.cnblogs.com/archive/2005/02/17/105400.html
首页