一、實現的功能
點擊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>
本人前端程序員，長期混跡於各種前端開發中，現在專門爲前端熱愛者建了個微信羣，和大家一起分享自己在工作、學習中遇到的技術知識或問題，還有各種資料和課程，各位感興趣的可以加入哦~
