Jquery实现“展开折叠效果”代码

废话不多说，我直接上Jquery代码，如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>laofan</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style>
  .detail_content{
    display: none;
}
 
  </style>
 </head>
 <body>

<div>
    <table>
        这是表格内容
    </table>

    <div class="detail_click">  
        展开
    </div> 

    <div class="detail_content">
     这是详情
    </div>
</div>



<div>
    <table>
        这是表格内容
    </table>

    <div class="detail_click">  
        展开
    </div> 

    <div class="detail_content">
     这是详情
    </div>
</div>


<script type="text/javascript">
      $('.detail_click').click(function(){
        //$(this) 为 detail_click 实体
        $(this).next().slideToggle('1000',function(){
           
            //$(this) 为 detail_content 实体
            // $(this).prev() 为 detail_click 实体
            $(this).prev().text($(this).is(":visible") ? "收起" : "展开" );

            
        });
    })
</script>

 </body>
</html>

发表评论取消回复