《锋利的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. 【VSCode】Windows下VSCode编译调试c/c++【更新】

    便携版已更新,点此获取便携版 用于cpptools插件的配置文件更新 更新的launch.json // Available variables which can be used inside of ...

  2. Java第01次实验提纲(基本概念+编程环境入门+PTA)

    0. 控制台下编译.运行 在Notepad++编写Java程序 学会使用控制台,javac.java 学会使用Notepad++ 参考资料: 控制台-cmd应用基础 扫盲教程 使用命令行编译并运行ja ...

  3. CSS 鼠标选中文字后改变背景色的实现代码

    废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...

  4. 【springBoot】之配置文件application

    springboot使用一个全局的配置文件application.properties或者是application.yml,放在在src/main/recesources下或者在类路径下的/confi ...

  5. Git初级

    一,安装git 一键安装 Mac 或 Windows. 二,下载一个工具书 Git 命令手册 free Git cheat sheet 三,安装完成之后需要先配置两个基本配置:用户名和邮箱 $ git ...

  6. [转][html]设置IIS 默认页

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...

  7. for循环计算li的个数

    今天有一段代码 在ie6下面显示 我检查了一下代码,发现每for循环一次,就会重新计算li的个数,会拖慢运行速度,所以改成以下代码,ie6就正常了

  8. Linux系统安装（centos6.8）符破解码

    1.安装 VMware VMware 是一个虚拟 PC 的软件,可以在现有的操作系统上虚拟出一个新的硬件环境,相当于模拟出一台新的 PC,我们可以在上面构造出一个或多个别的系统,以此来实现在一台机器上 ...

  9. centos7 firewall-cmd 理解多区域配置中的 firewalld 防火墙

    原文:https://www.linuxidc.com/Linux/2017-11/148795.htm 现在的新闻里充斥着服务器被攻击和数据失窃事件.对于一个阅读过安全公告博客的人来说,通过访问错误 ...

  10. [UE4]控件模板参数

    创建的时候就会变成这样了.