《锋利的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. 运行startup.bat的启动过程

    一.前言 一般启动tomcat都是找到bin目录下的startup.bat(windows)下或者startup.sh(linux下),所以要研究tomcat的启动,startup脚本是避不开的.那么 ...

  2. 我的ehcache笔记

    我的EhcacheUtils类: package com.shinho.bi.utils; import org.ehcache.CacheManager; import org.ehcache.co ...

  3. JavaEE Web 开发 链接 mysql 出现 Class.not found的错误

    明明在项目的library里头导入过mysql-connector.jar的包,但是在加载driver的时候eclipse一直报这个错误.解决方案其实很简单,就是同样的jar包在tomcat的安装目录 ...

  4. javase每天内容总结(32期)

    第一天 环境变量 编译与运行 dos命令 第二天 数据类型 运算符(三元) 第三天 引用数据类型(Scanner和Random) 流程控制语句 第四天 数组 第五天 方法(重载) 第六天 类 Arra ...

  5. react基础

    上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...

  6. a标签中可以加button,但是不提倡；button中不能加a标签，否则不能跳转

    a标签中可以加button,但是不提倡:button中不能加a标签,否则不能跳转

  7. ngx_lua_waf

    Web应用防护系统Web Application Firewall,简称WAF.针对HTTP/HTTPS的安全策略专门为Web应用提供保护的产品. OpenResty是一个基于 Nginx 与 Lua ...

  8. mysql为什么要分库分表？

    1 基本思想之什么是分库分表?从字面上简单理解,就是把原本存储于一个库的数据分块存储到多个库上,把原本存储于一个表的数据分块存储到多个表上. 2 基本思想之为什么要分库分表? 单表操作数据量有最优值, ...

  9. URL传值乱码

    JS端: &value=encodeURIComponent("value") C端: HttpUtility.UrlDecode(Request.Params[" ...

  10. sql-datediff

    SQL中DateDiff的用法 DATEDIFF返回跨两个指定日期的日期和时间边界数. 语法DATEDIFF ( datepart , startdate , enddate ) 参数datepart ...