jQuery实现DIV层收缩展开的方法

前端技术 2023/09/06 JavaScript

本文实例讲述了jQuery实现DIV层收缩展开的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:
<!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层的收缩展开效果</title>
<script type=\"text/javascript\" src=\"/images/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 h1\").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\">
<h1>收缩展开效果</h1>
<div class=\"text\">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
</div>
</div>
<br />
<div class=\"box\">
<h1>收缩展开效果</h1>
<div class=\"text\">
        1<br />
        2<br />
</div>
</div>
<br>
<font color=red>第一次运行请刷新一下页面。</font>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15189

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案