一、实现的功能
点击title区域的按钮，收缩/隐藏相应的内容区域，并改变按钮中的文案。
二、实现方法
采用jQuery中的slideToggle() 方法
定义和用法
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
语法
$(selector).slideToggle(speed,callback)
| 参数 | 描述 |
|---|---|
|
speed |
可选。规定元素从隐藏到可见的速度（或者相反）。默认为 “normal”。 可能的值：
在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。 |
|
callback |
可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。 |
提示和注释
提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{width: 300px; border-bottom: 1px solid #ccc; background: skyblue;}
.box:last-child{border: none;}
.box h3{margin: 0; padding: 10px 0; overflow: hidden; zoom: 1;}
.box h3 button{float: right;}
.box .content{background: lightgreen;}
</style>
</head>
<body>
<div class="box">
<h3>title1 <button>[收起]</button></h3>
<div class="content">
<div>内容1-1</div>
<div>内容1-2</div>
<div>内容1-3</div>
</div>
</div>
<div class="box">
<h3>title2 <button>[收起]</button></h3>
<div class="content">
<div>内容2-1</div>
<div>内容2-2</div>
<div>内容2-3</div>
</div>
</div>
<div class="box">
<h3>title3 <button>[收起]</button></h3>
<div class="content">
<div>内容3-1</div>
<div>内容3-2</div>
<div>内容3-3</div>
</div>
</div>
<script type="text/javascript" src="http://daipianpian.com/common/js/jquery-3.1.1.min.js"></script>
</head>
<script type="text/javascript">
// 收缩隐藏效果
$(document).ready(function(){
var buttonGroup = $('.box > h3 > button');
buttonGroup.each(function() {
$(this).click(function(){
$(this).parent('h3').next().slideToggle();
var btnText = $(this).text();
if(btnText == '[展开]') {
$(this).text('[收起]');
} else {
$(this).text('[展开]');
}
});
});
});
</script>
</body>
</html>本人前端程序员，长期混迹于各种前端开发中，现在专门为前端热爱者建了个微信群，和大家一起分享自己在工作、学习中遇到的技术知识或问题，还有各种资料和课程，各位感兴趣的可以加入哦~
版权声明：本文为daipianpian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。