jQuery实现简单点击隐藏和点击显示列表的功能

2024年4月11日 171次阅读 来源: zhangzeshan

实现功能为:列表内容较长 隐藏部分内容 点击按钮显示隐藏内容 再次点击隐藏内容

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代码:

    原文作者：zhangzeshan
    原文地址: https://segmentfault.com/a/1190000017561998
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞