《锋利的JQuery》第一个demo<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <title>Document</title>

    <style>

        div.showall>a:hover{

            color: rgb(235, 147, 39)

        }

        .promoted{

            background-color: deepskyblue;

            width: 10%;

        }

    </style>

</head>

<body>

    <div class="container">

        <ul>

            <li><a href="#">Html</a></li>

            <li><a href="#">Css</a></li>

            <li><a href="#">JavaScript</a></li>

            <li><a href="#">JQuery</a></li>

            <li><a href="#">BootStrap</a></li>

            <li><a href="#">Ajax</a></li>

            <li><a href="#">Node.js</a></li>

            <li><a href="#">Http</a></li>

            <li><a href="#">Tcp/Ip</a></li>

            <li><a href="#">Vue</a></li>

            <li><a href="#">Github</a></li>

            <li><a href="#">Webpack</a></li>

            <li><a href="#">Json</a></li>

            <li><a href="#">OOP</a></li>

            <li><a href="#">Less</a></li>

        </ul>

        <div class="showall">

            <a href="more.html"><span>显示全部</span></a>

            <!-- 平稳退化：如果用户禁用了js 就将整个页面重载来显示完整列表 -->

        </div>

    </div>

    <script>

        var $hiddenitems = $("ul li:gt(5):not(:last)");//获取ul下索引值大于5的li元素，再去掉最后一个符合的li

        $hiddenitems.hide();

        var showbtn = $("div.showall> a");//不能用.showall div

        showbtn.click(function(){

            if($hiddenitems.is(":visible")){

                $hiddenitems.hide();

                $(this).find("span").css("color","red")

                    .text("收起列表");

                $("ul li").filter(":contains('JQuery'),:contains('Node')")

                    .removeClass("promoted");

        }else{

                $hiddenitems.show();

                $(this).find("span").css("color","deepskyblue")

                    .text("显示全部");

                $("ul li").filter(":contains('JQuery'),:contains('Node')")

                .addClass("promoted");

            }

            return false;

        })

        //《锋利的JQuery》中提到了使用toggle方法，我试了一下发现并不可以
　　　　　//查阅后得知jquery1.9以后toggle方法只做切换隐藏显示动画用了，toggle([speed],[easing],[fn])
　　

    </script>

</body>

</html>

用JQuery实现简单的菜单隐藏于切换的更多相关文章

  1. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  2. jquery一个简单的菜单小插件

    刚学会封装插件,先来封装一个小的菜单插件 html部分 <ul class="zong"> <li class="yiji"> < ...

  3. Jquery二级简单折叠菜单

    写在前面: 1.前端新手 2.欢迎交流 3. 源代码百度云页面示例链接: http://pan.baidu.com/s/1nt0yjd3 链接失效请留言 效果图: 代码部分:jquery部分: < ...

  4. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

  5. jQuery实现简单导航栏的样式切换

    style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369;} ul>li{ text-decoration: ...

  6. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  7. 一个简单的QQ隐藏图生成算法 通过jQuery和C#分别实现对.NET Core Web Api的访问以及文件上传

    一个简单的QQ隐藏图生成算法   隐藏图不是什么新鲜的东西,具体表现在大部分社交软件中,预览图看到的是一张图,而点开后看到的又是另一张图.虽然很早就看到过这类图片,但是一直没有仔细研究过它的原理,今天 ...

  8. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  9. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

随机推荐

  1. 黄聪：Windows+PHP7+ImageMagick

    需要Apache下才适用,Nginx没测试过~ Step1 把ImageMagick对应版本下载下来(ps: 我这里下载的是这个版本ImageMagick-6.9.3-7-vc14-x86.zip) ...

  2. Java第02次实验提纲(Java基本语法与类库)

    1. 熟悉Git 1.1 学会使用网页版的操作代码仓库(gitee) 申请账号,然后根据老师提供的链接或者二维码加入团队,然后修改昵称. fork老师提供的代码库项目,新建自己学号命名的文件并上传一些 ...

  3. 关于Java与Map的那点事

    Java将Map拼接成“参数=值&参数=值”: 把一个map的键值对拼接成“参数=值&参数=值”即“username=angusbao&password=123456”这种形式 ...

  4. NPOI导出Excel2007板

    Excel2003有最大行限制相信大家在日常导出时都不会考虑再使用Excel2003,其实NPOI是一个听简单又好用的多里office组件的导出插件. 为了便于以后使用记录一下 第一步下载NPOI插件 ...

  5. 导入jar包的方法

    右键项目弹出菜单,进行如下选择: 4.在配置页中,选中Libraries标签页,然后点击Add JARs选择刚才拷贝过来的jar包.最后点击apply and close. 添加完成后图标会发生变化 ...

  6. 利用队列Queue实现一个多并发“线程池”效果的Socket程序

    本例通过利用类Queue建立了一个存放着Thread对象的“容器对象”,当Client端申请与Server端通信时,在Server端的“链接循环”中每次拿出一个Thread对象去创建“线程链接”,从而 ...

  7. [UE4]UI动画

  8. 基于JMX动态配置Log4J日志级别

    先来看比较low的修改日志级别的方式,在写程序里面. http://blog.gssxgss.me/java%E8%BF%90%E8%A1%8C%E6%97%B6%E5%8A%A8%E6%80%81% ...

  9. document.createRange剪贴板API

    js实现复制到剪贴板 document.createRange() API 选中元素→range→selection是一一对应的,即选区必须连续,不可以有分开的多个区域.另外,被选元素必须在dom树上 ...

  10. SCCM2012 R2实战系列之十：解决WDS服务无法启动问题（错误1067：进程意外终止)

    在操作系统分发(OSD)之前需要开启PXE服务,然后会自动在SCCM服务器安装Windows Deployment Service. 但是之前在一次项目过程当中发现启用PXE服务后WDS无法启动,本以 ...