在javascript中toggle()为连续点击事件,当里面含有多个function(){}函数时,每次点击依次执行里面的function的函数,直至最后一个.随后每次点击都重复对这几个函数的轮番调用,toggle的语法如下

toggle(fn1,fn2,fn3·····fnN);

但当toggle（），不带参数时,与show()和hide()的作用一样,切换元素的可见状态,如果元素是可见的,则切换为隐藏状态;如果元素是隐藏的则切换为可见状态,此时括号内可添加()毫秒(如1000)等),slow,normal,fast等;

toggleClass( )与toggle( )差不多,如果里面含有class样式则移除,没有的话则添加;其事例代码如下:

 <html lang="en">

 <head>

     <meta charset="UTF-8">

 <title>FAQ列表</title>

 <style type="text/css" >

 *{

     margin:0px;

     padding:0px;

     font-size:12px;

 }

 a{

     color:#000;

     text-decoration:none;

 }

 #menu{

     margin:30px;

     width:188px;

     background-color:#EFFDFA;

 }

 .top{

     height:40px;

     line-height:40px;

     font-size:14px;

     font-weight:bold;

     text-align:center;

     border:1px solid #93D6C5;

     border-bottom:none;

 }

 .nav{

     list-style:none; 

 }

 li{

     display:block;

     height:30px;

     line-height:30px;

     border:1px solid #93D6C5;

     border-top:none;

      padding-left:30px;

 }

 .lastone{

     border:none;

     cursor:pointer;

     background-color:red;

 }

 .up{

     border:none;

     cursor:pointer;

     background-color:blue;

 }

 </style>

 <script src="js/jquery-1.12.4.js"></script>

 </head>

 <body>

 <div id="menu">

     <div class="top">全部商品详细分类</div>

     <ul class="nav">

         <li><a href="#">尾品汇</a></li>

         <li><a href="#">图书音像数字管</a></li>

         <li><a href="#">美妆个护</a></li>

         <li><a href="#">家具、家纺、家装</a></li>

         <li><a href="#">鞋靴、箱包</a></li>

         <li><a href="#">珠宝装饰</a></li>

         <li><a href="#">手表/眼镜/礼品</a></li>

         <li><a href="#">运动户外</a></li>

         <li><a href="#">食品、茶、酒</a></li>

         <li><a href="#">手机、数码</a></li>

         <li><a href="#">电脑办公</a></li>

         <li class="lastone"></li>

     </ul>

 </div>

 <script>

     $(function(){

         $("li:last").click(function(){

             $("li:not(li:last):gt(6)").toggle("slow");

             $("li:last").toggleClass("lastone");

             $("li:last").toggleClass("up");

         });

     })

 </script>

 </body>

 </html>

点击最后一个将后(不包括最后一个)的四个li隐藏,且最后一个背景颜色改变...

js中toggle()及toggleClass()的使用详解的更多相关文章

  1. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  2. Js中this用法及注意点详解

          我们在写js时,特别是用到回调函数时,经常会发现this指代的对象总是可能脱离自己的思路而发生改变.面向对象语言的特性告诉我们this始终指代它的调用者,而在js中回调函数中内部的this ...

  3. js中的Object.defineProperty()和defineProperties()详解

    ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...

  4. node.js 中模块的循环调用问题详解

    首先,我们看一下图示代码,每一个注释其实代表一个 js 文件.所以下面其实是三个 js 文件 .第一个是我们要运行的 main 文件,后面两个是 a, b 文件.   从上面可以看书 a ,b 两个模 ...

  5. JS中的事件委托/事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  6. js中事件冒泡，事件捕获详解

    一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...

  7. js中prototype与__proto__的关系详解

    一.构造函数: 构造函数:通过new关键字可以用来创建特定类型的对象的函数.比如像Object和Array,两者属于内置的原生的构造函数,在运行时会自动的出现在执行环境中,可以直接使用.如下: var ...

  8. js数组中foEach和map的用法详解 jq中的$.each和$.map

    数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...

  9. js正则实现二代身份证号码验证详解

    js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...

随机推荐

  1. Java面试步步走

    一.Java 基础 1.Java 集合原理 2.Java 多线程.同步集合.并发集合.阻塞队列.线程池.各种锁等 3.JVM 垃圾回收机制.JVM 引用类型.JVM 内存模型 二.应用技术基础 1)数 ...

  2. ubuntu 12.04 x86_64:java.lang.UnsatisfiedLinkError: Could not load SWT library. Reasons

    sy@sy-Aspire-:~$ .0_155965261/configuration/.log !SESSION -- ::39.595 ------------------------------ ...

  3. ajax大洋第一步

    Ajax工具包 Ajax并不是一项新技术,它实际上是几种技术,每种技术各尽其职,以一种全新的方式聚合在一起. 服务器端语言:服务器需要具备向浏览器发送特定信息的能力.Ajax与服务器端语言无关. XM ...

  4. Web性能优化工具WebPageTest（一）——总览与配置

    网站性能优化工具大致分为两类:综合类和RUM类(实时监控用户类),WebPageTest属于综合类. WebPageTest通过布置一些特定的场景进行测试,例如不同的网速.浏览器.位置等. 测试完成后 ...

  5. git常见操作指令

    由于公司用的是git进行版本管理,所以零零散散的学了一些常用到的git指令: 近日把廖雪峰前辈的git教程看了一遍,感觉操作起来更得心应手,在此做个记录,如有错漏望指正: git init //初始化 ...

  6. html5脚本编程

    (1)跨文档消息传递,XDM.指的是来自不同域的页面间传递消息. XDM的核心是postMessage();向另一个地方传递数据,指是包含在当前页面中的iframe元素,由当前页面弹出的窗口. var ...

  7. JS取消浏览器文本选中的方法

    一 .问题的出现 今天在使用Easy-UI 的messager.alert()方法时候出现浏览器文本被选中,不知道其中是什么原因,如下图所示. 二 .解决思路 我最后的思路时在弹出消息框的同时,取消浏 ...

  8. Linux - atexit()（注册终止）函数

    进程终⽌的⽅式有8种,前5种为正常终⽌,后三种为异常终⽌: 1. 从main函数返回: 2 .调⽤exit函数:3 .调⽤_exit或_Exit:4 .最后⼀个线程从启动例程返回:5 .最后⼀个线程调 ...

  9. FOJ 11月月赛题解

    抽空在vjudge上做了这套题.剩下FZU 2208数论题不会. FZU 2205 这是个想法题,每次可以在上一次基础上加上边数/2的新边. #include <iostream> #in ...

  10. 【代码学习】PHP 正则表达式

    一.正则表达式介绍 正则表达式是用于描述字符排列和匹配模式的一种规则,主要用于字符串的匹配.查找.替换.分割等操作 ------------------------------------------ ...