JQUERY 展开收起显示隐藏效果

<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery 收缩展开效果</title>
<script type="text/javascript" src="http://www.mengdongli.com/skins/2012/js/jquery1.3.2.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");
   //});
        $("div.text").hide();//默认隐藏div，或者在样式表中添加.text{display:none}，推荐使用后者
        $(".box h1").click(function(){
                $(this).next(".text").slideToggle("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>
第一次运行请刷新一下页面。
</body>
</html>

提示：您可以先修改部分代码再运行

相关阅读:
排序入门练习题3 谁考了第k名题解
排序入门练习题2 从大到小排序题解
排序入门练习题1 排序题解
关于这个博客
Count Good Substrings
Long Long Message
Milk Patterns
Musical Theme
Life Forms
New Distinct Substrings

原文地址：https://www.cnblogs.com/liuzhuqing/p/7480657.html