切换评论框

Question

我有一个网站，使用PHP来填充一系列的div与MySql服务器的消息。

我想在每个消息的切换中编写代码，以便它们可以轻松地折叠。问题在于如何编码。观察：

<style type="text/css"> 
      #slide { 

        } 
      #slide-body{ 
       height: 100px; 
       overflow: hidden; 
       transition:    height 10ms ease; 
        -moz-transition: height 10ms ease; 
        -ms-transition:  height 10ms ease; 
        -o-transition:  height 10ms ease; 
        -webkit-transition: height 10ms ease; 
         } 
      .collapsed { 
       height: 0px !important; 

         } 
      #less {  
       cursor: pointer; 
       text-align: left; 
       font-style: italic; 
        } 
     </style>   
    <script type="text/javascript">//<![CDATA[ 
       window.onload=function(){ 
       document.getElementById('slide').addEventListener('click', function() { 
        var body = document.getElementById('slide-body'); 
        if(body.className == 'collapsed') { 
         body.className = ''; 
       document.getElementById('less').textContent = " [-]"; 
       } else { 
        body.className = 'collapsed'; 
       document.getElementById('less').textContent = " [+] The comment is now hidden. Press [+] to expand."; 
       }; 
       }); 
       }//]]> 
      </script> 


<div id="slide"> 
    <div id="less">[-]</div> 
    <div id="slide-body"> 
    Its a piece of cake to bake a pretty cake. Its a piece of cake to bake a pretty cake. 
    </div> 
</div> 

<div id="slide"> 
    <div id="less">[-]</div> 
    <div id="slide-body"> 
    Its a piece of cake to bake a pretty cake. Its a piece of cake to bake a pretty cake. 
    </div> 
</div> 

我非常感谢您的任何建议，可以给我。我曾尝试使用类而不是Id，但没有任何反应。我相当新使用JavaScript。

Answer 1

下面是一个example fiddle

我改变了使用类而不是ID的HTML：

<div class="slide"> 
    <a href="#" class="less">[-]</a> 
    <div class="slide-body"> 
    Its a piece of cake to bake a pretty cake. Its a piece of cake to bake a pretty cake. 
    </div> 
</div> 

<div class="slide"> 
    <a href="#" class="less">[-]</a> 
    <div class="slide-body"> 
    Its a piece of cake to bake a pretty cake. Its a piece of cake to bake a pretty cake. 
    </div> 
</div> 

，并将此jQuery脚本：

$('.less').click(function(e){ 
    var sbody = $(e.currentTarget).parent().find('.slide-body'); 
    sbody.toggle(); 
    $(this).text(sbody.is(':visible') ? '[-]' : '[+]') 
}) 

HTH，

-Ted