zoukankan      html  css  js  c++  java
  • 【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>
    
    
  • 相关阅读:
    drf 权限流程解析
    drf 认证流程解析
    drf 版本解析
    Django REST framework初识
    RESTful规范
    Flask框架
    Flask框架解析目录
    hdu
    hdu 6113 度度熊的01世界(结构体的赋值问题)
    hdu 6114 chess(排列组合)
  • 原文地址:https://www.cnblogs.com/richerdyoung/p/12129913.html
Copyright © 2011-2022 走看看