jQuery实现DIV层的收缩展开效果

最新推荐文章于 2024-09-13 12:15:31 发布

Fly_9k

最新推荐文章于 2024-09-13 12:15:31 发布

阅读量5k

点赞数

分类专栏： javaScript 文章标签： js jQuery 收缩展开

本文链接：https://blog.csdn.net/Fly_9k/article/details/72539791

版权

javaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了一种使用jQuery实现的DIV层收缩展开效果，通过简单的HTML结构和jQuery代码，可以轻松地为页面元素添加平滑的动画效果。该效果利用了jQuery的动画功能，能够动态调整DIV的高度和透明度。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现DIV层的收缩展开效果_网页代码站(www.webdm.cn)</title>
<script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>
<style>
/* 收缩展开效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1px solid #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
   $(".box h4").toggle(function(){
     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
   },function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
   });
});
</script>
<!-- 收缩展开效果 -->
<div class="box">
<h4>收缩</h4>
<div class="text">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
6<br />
        7<br />
8<br />
        9<br />
</div>
</div>
<br />


<div class="box">
<h4>收缩</h4>
<div class="text">
        1<br />
        2<br />
3<br />
        4<br />
        5<br />
6<br />
        7<br />
8<br />
        9<br />
</div>
</div>
<br>


</body>
</html>