用JavaScript 实现可折叠区域

       这是一个非常简单的应用，这个应用在过去几年在网页上创建可折叠区域是非常普遍的。
其基本思想就是用CSS的display特性就可以完成。
由于其实现比较简单，我就不多说了，
代码如下：

<html>
<head>
<title>
Style Example
</title>
<script type="text/javascript">
function toggle(sDivId)
 {
var oDiv=document.getElementById(sDivId);
oDiv.style.display=(oDiv.style.display=="none")?"block":"none";//这是关键代码
 }
</script>
<body>
<div style="background-color:blue;color:white;font-weight:bold;
padding:10px;cursor:pointer" onclick="toggle('divContent1')">点击</div>
<div div style="border:3px solid blue;height:100px;padding:10px" id="divContent1">
这段内容用于演示隐藏与显示</div>
<p>&nbsp;</p>
<div style="background-color:blue; color:white;font-weight:bold; padding:10px;cursor:pointer" onclick="toggle('divContent2')">点击这里</div>
<div style="border:3px solid blue; height:100px;padding:10px" id="divContent2">这段内容用于演示隐藏与显示.</div>
</body>
</html>













posted @ 2009-10-07 13:47  Blue_sky  阅读(559)  评论(2)    收藏  举报