實現功能為:列表內容較長 隱藏部分內容 點選按鈕顯示隱藏內容 再次點選隱藏內容
jQ程式碼如下:
$(function(){
var $cate = $("ul li:gt(5):not(`:last`)") ;//獲取大於第五行的內容不包括最後一行為物件
$cate.hide();//將物件隱藏
var $more = $("div.showmore>a");//獲取顯示全部內容的按鈕
$more.click(function(){
if($cate.is(":hidden")){//當內容為隱藏的時候
$cate.show();//將物件顯示
$(".showmore a span").text("顯示精簡內容");//判斷為隱藏的時候 顯示全部 按鈕文字變為顯示成精簡內容
}else{
$cate.hide();//將物件隱藏
$(".showmore a span").text("顯示全部內容");//判斷為顯示的時候 隱藏部分 按鈕文字變成顯示全部內容
}
return false;//禁止超連結跳轉
})
})
HTML程式碼: