《锋利的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. WPF Demo15 MVVM

    项目结构如下: <Window x:Class="MVVMDemo.MainWindow" xmlns="http://schemas.microsoft.com/ ...

  2. AutoCAD的代替软件

    AutoCAD的代替软件Autocad2005以上版本都需要.net framework的支持,安装起来太麻烦,而且卡顿.以下几个软件可以代替Autocad,操作和插件基本都能兼容Autocad.1. ...

  3. windows 下跟踪日志的几个工具总结

    1.baretailpro.exe 2.wintail.exe 3.vim(using tail bundle plugin) 4.Notepad++ (Plugin->Plugin Manag ...

  4. go学习day3

    strings和strconv使用 1.strings.HasPrefix(s string, prefix string) bool:判断字符串s是否以prefix开头 2.strings.HasS ...

  5. java1.8新特性（一）

    一直在更新java 版本,原来也没有关注java版本的变化 引入的一些新的api  引起注意的还是  关于一些并发包的使用,那时候才对每个版本的特性 去了解了一下,虽然 不一定都用上了,但是不管学习什 ...

  6. Hive之示例一：基本操作与案例

    1. 创建数据库,切换数据库 create database testdb; use testdb; 2. 创建管理表 create table emp( empno int, empname str ...

  7. mysql查询优化之四：优化特定类型的查询

    本文将介绍如何优化特定类型的查询. 1.优化count()查询count()聚合函数,以及如何优化使用了该函数的查询,很可能是mysql中最容易被误解的前10个话题之一 count() 是一个特殊的函 ...

  8. 信息安全-加密：RSA 算法

    ylbtech-信息安全-加密:RSA 算法 RSA公开密钥密码体制.所谓的公开密钥密码体制就是使用不同的加密密钥与解密密钥,是一种“由已知加密密钥推导出解密密钥在计算上是不可行的”密码体制. 1.返 ...

  9. C语言强化——字符串（1）

    实现 mystrcpy(), mystrcmp(), mystrcat(), mystrlen() ; #include<stdio.h> void mystrcpy(char *i,ch ...

  10. [UE4]移除UI（User Widget）并销毁

    1.移除UI,使用“Remove from Parent”方法 2.最后一步给UI变量赋值的时候,如果保持默认选择“Select Assets”,则会把UI变量销毁(赋值为null).