在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. POPTEST老李谈钩子

    poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...

  2. 老李分享：JVM调优

    老李分享:JVM调优   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨 ...

  3. (iOS)sqlcipher和FMDB的使用总结(原创)

    写这篇文章的原因是之前接触到了关于sqlite数据库加密的问题,一般数据库加密,无非是数据加密和数据库文件加密,当然数据库文件加密对手机效率可能更高一些. 下面就讲一下,自己对sqlcipher和fm ...

  4. Maven基础学习(一)—Maven入门

    一.概述      Maven是一个项目管理工具,它包含了一个项目对象模型(Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管 ...

  5. Kafka0.10.2.0分布式集群安装

    一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 1.2 Scala 参见博文:http://www.cnblogs. ...

  6. 微信小程序入门学习

    前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...

  7. ios 视频拼接/合成

    上面的图说明的是这个混合的过程,下面放代码: - (void)mergeAndExportVideos:(NSArray*)videosPathArray withOutPath:(NSString* ...

  8. html列表问题

    HTML无序列表 无序列表是一个项目的列表,此列项目运用粗体圆点(典型的小黑圆圈)进行符号. 无序列表运用 标签 Coffee Milk 浏览器闪现如下: <ul "="&q ...

  9. 表单的序列化ajax

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  10. Druid Indexing 服务

    索引服务由三个主要组件:一个是peon 组件,可以运行一个任务,一个是Middle Managers组件,管理peons,和一个overlord 组件管理任务分发给Middle Managers. o ...