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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM