Div展開收縮是網頁設計中常用的效果之一，通過使用jQuery庫中的方法可以輕松實現。下面我們來講解一下具體實現方式。

// 找到需要操作的元素
var $box = $('.box');
var $btn = $('.btn');
// 綁定點擊事件
$btn.on('click', function() {
// 判斷當前元素狀態
if($box.hasClass('active')) {
// 關閉
$box.removeClass('active');
$box.slideUp();
} else {
// 展開
$box.addClass('active');
$box.slideDown();
}
});

代碼中首先找到需要操作的元素，其中.box代表需要展開/收縮的div元素，.btn代表控制按鈕。然后在點擊事件中判斷當前元素狀態，如果已經展開，則關閉；反之，展開。并且為了實現平滑過渡效果，使用了jQuery提供的slideUp()和slideDown()方法。

這樣通過簡單的jQuery代碼就能實現div元素的展開收縮效果，可以為網頁增添不少動態感。