在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. 移动开发必须要弄明白的问题】详解Eclipse转Android Studio

    2015-12-09 13:01:244264浏览3评论 AS出来一年多了,最近才从Eclipse转到AS,但我并不觉得使用Eclipse有多落后,它们都只是一个工具而已,哪个顺手就用哪个,用得好都能 ...

  2. webService请求方式快速生成代码 (Postman)

    Postman 这个东西只能在外网下载,是Goole一个插件. 1.FQ到外网,这里就不具体介绍怎么FQ了 2.上到谷歌浏览器,找到更过工具--->扩张程序--->获取更多扩张程序 3.在 ...

  3. (iOS)关于@property和@synthesize的理解(原创)

    开始学习ios的时候,就对一些objc的语法不理解,就比如@property和@synthesize,之前都是记住然后照着用,但是写的代码多了,对objc和ios有了一些理解,再加上最近用MRC,所以 ...

  4. 深度学习的2016: NIPS 2016速览

    With best wishes for a happy New Year! NIPS(Nerual Information Processing Systems)是人工智能.机器学习领域的顶级学术会 ...

  5. PAT 1046

    1046. Shortest Distance (20) The task is really simple: given N exits on a highway which forms a sim ...

  6. 【one day one linux】find 用法详解小记

    find命令的功能很强大,查找文件的选项很多,所以这是一个很实用并且很常用的linux命令.但是他有个缺点就是搜索的时候比较慢的.而与之相对的有一个locate命令. find的命令格式 find   ...

  7. js中的IP格式正则匹配校验详解~

    IPV4的格式为x:y:z:w,其中{x,y,z,w}属于{0~255}的正整数: 下面是其校验的正则表达式: function isIP(ip) { var re =  /^(\d{1,2}|1\d ...

  8. angular中路由的实现（针对新手）

    最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...

  9. 鸟哥linux私房菜学习笔记，U盘安装centos5.3不能正常引导的问题

    前言: 一直都想学习linux,毕竟是做测试的标配.听过鸟哥的linux私房菜大名,作为新手我淘来了第三版,到手看到书的厚度,心都凉了半截,本着不能浪费的原则,还是学吧! 过程:        开始看 ...

  10. 获取camera截屏图片

    Camera camera; SpriteRenderer sprRender; Texture2D t2d = New Texture2D(1300, 760, TextureFormat.RGB2 ...