js点击弹出和隐藏一个div层效果代码实例
本章节分享一段代码实例，它实现了点击标题弹出或者关闭一个div层效果。
当然里面还有一些其他的小细节，下面就进行一下分享。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
body{
text-align:center;
}
p{
cursor:pointer;
margin:0;
padding:0;
font-size:24px;
display:inline;
}
div a:link, div a:visited{
color:#666;
text-decoration:none;
}
div a:hover{
color:#FF6600;
text-decoration:underline;
}
div{
border:2px solid #666;
background:#fff;
margin:5px auto;
overflow:hidden;
display:none;
padding:5px 10px;
}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
width:70px;
}
li.title{
font-weight:bold;
}
</style>
<script type="text/javascript">
var w=0;
var h=0;
function emotion(){
var oMenu=document.getElementById("menu");
if(w<=50){
oMenu.style.display = "block";
fnLarge();
}
else{
fnSmall();
}
}
function fnLarge(){
var oMenu=document.getElementById("menu");
if(w<200){
w+=50;
h+=25;
oMenu.style.width=w+"px";
oMenu.style.height=h+"px";
window.setTimeout("fnLarge()",10);
}
}
function fnSmall(){
var oMenu=document.getElementById("menu");
if(w>0){
w-=50;
h-=25;
oMenu.style.width=w+"px";
oMenu.style.height=h+"px";
window.setTimeout("fnSmall()",5);
}
else{
oMenu.style.display = "none";
}
}
window.onload=function(){
var op=document.getElementById("antzone");
var odiv=document.getElementById("menu");
var lis=odiv.getElementsByTagName("li");
op.onclick=function(){emotion();}
for(var index=0;index<lis.length;index++){
lis[index].onclick=function(){
fnSmall();
}
}
}
</script>
</head>
<body>
<p id="antzone">前端教程网欢迎您</p>
<div id="menu">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80" valign="top" align="left">
<ul>
<li class="title">ASP</li>
<li><a href="#">新闻</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">CMS</a></li>
<li></li>
</ul>
</td>
<td width="80" valign="top" align="left">
<ul>
<li class="title">;PHP</li>
<li><a href="#">文章</a></li>
<li><a href="#">聊天</a></li>
<li><a href="#">插件</a></li>
<li><a href="#">企业</a></li>
</ul>
</td>
<td width="80" valign="top" align="left">
<ul>
<li class="title">JSP</li>
<li><a href="#">AJAX</a></li>
<li><a href="#">JQUERY</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">pipipi.net</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var w=0，声明一个变量并赋初值为0，存储元素的宽度。
（2）.var h=0，声明一个变量并赋初值为0，存储元素的高度。
（3）.function emotion(){
var oMenu=document.getElementById("menu");
if(w<=50){
oMenu.style.display = "block";
fnLarge();
}
else{
fnSmall();
}
}，此方法可以实现元素的隐藏和显示。
如果元素当前的宽度小于等于50，那么就执行显示操作，否则执行隐藏操作。
（4）.function fnLarge(){
var oMenu=document.getElementById("menu");
if(w<200){
w+=50;
h+=25;
oMenu.style.width=w+"px";
oMenu.style.height=h+"px";
window.setTimeout("fnLarge()",10);
}
}，以递归动画的方式展现元素。
采用定时器函数递归调用函数，每执行一次元素的尺寸增加一定数目。
（5）.function fnSmall(){
var oMenu=document.getElementById("menu");
if(w>0){
w-=50;
h-=25;
oMenu.style.width=w+"px";
oMenu.style.height=h+"px";
window.setTimeout("fnSmall()",5);
}
else{
oMenu.style.display = "none";
}
}，和上面的原理是一样的，只不过是隐藏元素。
（6）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（7）.var op=document.getElementById("antzone")，获取id属性值为antzone的元素对象。
（8）.var lis=odiv.getElementsByTagName("li")，获取li元素对象集合。
（9）.for(var index=0;index<lis.length;index++){
lis[index].onclick=function(){
fnSmall();
}
}，采用for循环的方式批量注册事件处理函数。
二.相关阅读:
（1）.setTimeout()方法可以参阅setTimeout()一章节。
（2）.getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。