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>
    A+
发布日期:2020年01月03日 19:33:41  所属分类:JQuery
最后更新时间:2020-01-03 19:33:41
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
头像
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: