在網(wǎng)頁(yè)設(shè)計(jì)中,經(jīng)常會(huì)遇到需要折疊展開(kāi)內(nèi)容的情況,這時(shí)候可以用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的li展開(kāi)收起功能。
// 點(diǎn)擊展開(kāi)/收起按鈕
$('button').click(function(){
// 判斷當(dāng)前狀態(tài)
if($(this).hasClass('open')){
// 當(dāng)前為展開(kāi)狀態(tài),執(zhí)行收縮操作
$(this).removeClass('open').text('展開(kāi)');
$(this).prev().slideUp(200);
}else{
// 當(dāng)前為收起狀態(tài),執(zhí)行展開(kāi)操作
$(this).addClass('open').text('收起');
$(this).prev().slideDown(200);
}
});
以上代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的li展開(kāi)收起功能,當(dāng)點(diǎn)擊展開(kāi)/收起按鈕時(shí),會(huì)根據(jù)當(dāng)前狀態(tài)進(jìn)行展開(kāi)或收起操作。