在網頁設計中,經常會遇到需要折疊展開內容的情況,這時候可以用jQuery實現一個簡單的li展開收起功能。
// 點擊展開/收起按鈕
$('button').click(function(){
// 判斷當前狀態
if($(this).hasClass('open')){
// 當前為展開狀態,執行收縮操作
$(this).removeClass('open').text('展開');
$(this).prev().slideUp(200);
}else{
// 當前為收起狀態,執行展開操作
$(this).addClass('open').text('收起');
$(this).prev().slideDown(200);
}
});
以上代碼實現了一個簡單的li展開收起功能,當點擊展開/收起按鈕時,會根據當前狀態進行展開或收起操作。