美文网首页
jQuery实现简单点击隐藏和点击显示列表的功能

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

作者: zhangzeshan | 来源:发表于2018-07-17 11:34 被阅读0次

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


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实现简单点击隐藏和点击显示列表的功能

    实现功能为:列表内容较长 隐藏部分内容 点击按钮显示隐藏内容 再次点击隐藏内容 jQ代码如下: $(functio...

  • react native实现隐藏和显示

    1.目的:实现隐藏和显示功能。如点击某一列表,显示其列表下的内容 2.实现思路:通过对this.state显示初始...

  • js事件处理机制和popover轮子

    在造轮子的时候,需要实现一个简单的点击按钮内容显示/隐藏,点击空白区域内容隐藏,点击内容区域内容不隐藏的功能代码如...

  • iOS站内推送UI实现

    一、功能列表: 一行代码实现站内推送UI效果 多次点击展示兼容 支持点击推送UI事件 支持显示隐藏动画及自定义展示...

  • jQuery与js常用方法对比

    (一)文档就绪 jQuery实现 或简写为 js实现 (二)元素选择 (三)点击事件 (四)元素显示和隐藏 jQu...

  • 密码输入框

    带有右侧点击图片显示和隐藏密码的功能.

  • 2018-12-14jQuery 效果 - toggle() 方

    今天做log.png图标点击进行显示和隐藏功能。发现jQuery之强大。 引用来自http://www.w3sch...

  • toggle(),显示和隐藏元素

    功能:用来显示和隐藏某个元素,例如第一次点击按钮显示元素,再次点击按钮会隐藏元素书写格式:$(selector)....

  • Android点击显示隐藏密码

    点击图标显示隐藏密码功能 //密码不显示时点击显示 mPwd.setTransformationMethod(Hi...

  • 微信小程序点击显示隐藏

    实现点击列表显示当前列表的明细 思路: 1、根据列表当前项id查询对应明细 2、实现点击当前列表显示当前明细 (1...

网友评论

      本文标题:jQuery实现简单点击隐藏和点击显示列表的功能

      本文链接:https://www.haomeiwen.com/subject/umuppftx.html