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


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容