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


jQuery实现简单点击隐藏和点击显示列表的功能_第1张图片

你可能感兴趣的:(jQuery实现简单点击隐藏和点击显示列表的功能)