【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>

【Jquery】 实现的展开折叠效果

【Jquery】实现的展开折叠效果