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

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

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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值