这几日写的页面中
很频繁的用到了此效果
所以特把此JS记录下来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*{ margin:0; padding:0}
body{ font-size:12px}
#box{ margin:20px; width:300px}
.dt{ background:url(http://www.iceapple.net/themes/Ice/images/comments.gif) left center no-repeat; padding-left:25px;cursor:pointer}
.dd{ border-bottom: 1px red dashed}
#ul{ line-height:20px; list-style:none}
#ul li{ margin-left:30px}
</style>
<title>http://www.iceapple.net</title>
<script type="text/javascript">
function $(ul)
{
return document.getElementById(ul)
}
function setStyle(ul)
{
var ul = $(ul);
var currentStyle = ul.style.display;
if ( currentStyle == 'none')
{
ul.style.display = 'block'
}
else
{
ul.style.display = 'none'
}
}
function $(id)
{
return document.getElementById(id);
}
function setStyle(id)
{
var child = $(id);
var currentStyle = child.style.display;
if(currentStyle=='none')
{
child.style.display='block';
}
else
{
child.style.display='none';
}
}
</script>
</head>
<body>
<div id="box">
<h2 onclick="setStyle('ul')" style="cursor:pointer">目录</h2>
<ul id="ul">
<li>Home</li>
<li>About</li>
<li>Admin</li>
<li>Categories</li>
<li>Archives</li>
<li>Blogroll</li>
<li>Recent Comments</li>
</ul>
<dl style="line-height:30px">
<dt class="dt" onclick="setStyle('child_1');">1、你是否认识Apple？</dt>
<dd class="dd" id="child_1" >答：我当然认识我自己，哈哈</dd>
<dt class="dt" onclick="setStyle('child_2');">2、Apple的住址是哪里？</dt>
<dd class="dd" id="child_2">答：Apple的住址是http://www.iceapple.net</dd>
</dl>
</div>
</body>
</html>
此JS的思路与方法是：
先找到要控制的文档部分，并标示一个“ID”
然后就算改变表现方式
function $(id) 方法 方法名（参数）
通过这个方法找到参数id并回传
var child = $(id) 定义变量
然后通过if判断控制它的显示方式，完成效果