我正在坐一个网站，需要实现层的折叠效果，要求开始时是折叠上的，而且是多个栏目的。请高手指点！谢谢了。

Question

<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" style="display:none">用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" style="display:none">用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" style="display:none">用JS实现层的折叠效果 <br> 
        用JS实现层的折叠效果 <br> 
        用JS实现层的折叠效果 <br> 
        用JS实现层的折叠效果 <br> 
        用JS实现层的折叠效果 </div> </td> 
  </tr> 
</table>

Answer 1

<span id=foldbar onclick=fold(this)>+</span>中+前后没有空格

Answer 2

如果开始展现的时候还要效果，就还需要修改：
if(!obj.h){ 
    obj.h=obj.offsetHeight 
    obj.style.height=obj.h 
}
改为
if(!obj.h){ 
    obj.h=obj.offsetHeight 
    obj.style.height=0 
}

Answer 3

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) 
} 
这个函数是什么意思？麻烦给解释一下，我差了半天资料还是有点糊涂。谢谢了！