《锋利的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. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  2. 黄聪：Android酷炫实用的开源框架（UI框架）（转）

    Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...

  3. 数据仓库专题（2）-Kimball维度建模四步骤

    一.前言 四步过程维度建模由Kimball提出,可以做为业务梳理.数据梳理后进行多维数据模型设计的指导流程,但是不能作为数据仓库系统建设的指导流程.本文就相关流程及核心问题进行解读. 二.数据仓库建设 ...

  4. ubuntu更新提示/boot空间不足

    1. 查看当前使用的内核版本 uname -a 2.在终端下察看已经安装的旧的内核: ctrl+alt+t——>进入终端——>输入命令: dpkg --get-selections|gre ...

  5. Python单元测试框架之pytest 1 ---如何执行测试用例

    From: https://www.cnblogs.com/fnng/p/4765112.html 介绍   pytest是一个成熟的全功能的Python测试工具,可以帮助你写出更好的程序. 适合从简 ...

  6. mysql 数据库排序规则

    MySQL中的排序规则.在新建MySQL数据库或表的时候经常会选择字符集和排序规则.数据库用的字符集大家都知道是怎么回事,那排序规则是什么呢? 排序规则:是指对指定字符集下不同字符的比较规则.其特征有 ...

  7. LeetCode——1. Two Sum

    一.题目链接:https://leetcode.com/articles/two-sum/ 二.题目大意: 给定一个int型数组A和int值a,要求从A中找到两个数,使得这两个数值的和为a:返回结果为 ...

  8. gerrit配置和使用

    参考http://www.cnblogs.com/tesky0125/p/5973642.html 1.安装gerrit replication插件 mkdir ~/tmp cp gerrit-2.1 ...

  9. C++进阶--公有继承的二元性

    //########################################################################### /* * 公有继承的两元性 * * - 接口 ...

  10. Inno Setup 脚本

    给你个我用的例子: Delphi/Pascal code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...