jQuery實現簡單點擊隱藏和點擊顯示列表的功能

實現功能爲:列表內容較長 隱藏部份內容 點擊按鈕顯示隱藏內容 再次點擊隱藏內容ide

jQ代碼以下:spa

$(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代碼:code

相關文章
相關標籤/搜索