如果用JS实现层的折叠效果???

Question

CSDN 左边的导航栏，不是最好的样本么；
学习下它的代码的就可以了。

Answer 1

<style>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
  <tr>
    <td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
  </tr>
  <tr>
    <td><div id="title_1_content">用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果</div></td>
  </tr>
  <tr>
    <td id="title_2">栏目2<span id=foldbar onclick=fold(this)>-</span></td>
  </tr>
  <tr>
    <td><div id="title_2_content">用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果</div></td>
  </tr>
  <tr>
    <td id="title_3">栏目3<span id=foldbar onclick=fold(this)>-</span></td>
  </tr>
  <tr>
    <td><div id="title_3_content">用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果<br>
        用JS实现层的折叠效果</div></td>
  </tr>
</table>
把+-换成对应的图片即可。

Answer 2

引入jquery，然后写入代码<script src="jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function(){
$(".collpaseable dt").click(function(){
                    $(this).toggleClass("off");
                    $(this).next("dd").toggle("slow");
                });
});
//-->
</SCRIPT>
<style>
    .collpaseable dt{background: url('-.gif') no-repeat left center; padding-left: 15px; }
    .collpaseable dt.off{background: url('+.gif') no-repeat left center;}
</style>
<dl class="collpaseable">
    <dt>单击折叠</dt>
    <dd>这里内容</dd>
</dl>