在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. ksum问题

    2sum: Given an array of integers, return indices of the two numbers such that they add up to a speci ...

  2. UNION ALL合表查询

    有时候需要连表查询数据,可以使用union all来做合表. 语法: SELECT column_name FROM table1UNION ALLSELECT column_name FROM ta ...

  3. emmet（快速开发）的使用

    emmet可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发. 比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...

  4. Java排序算法之堆排序

    堆的概念: 堆是一种完全二叉树,非叶子结点 i 要满足key[i]>key[i+1]&&key[i]>key[i+2](最大堆) 或者 key[i]<key[i+1] ...

  5. js根据条件json生成随机json：randomjson

    前端开发中,在做前后端分离的时候,经常需要手写json数据,有3个问题特别揪心: 1,数据是写死的,不能按一定的条件随机生成长度不一,内容不一的数据 2,写数组的时候,如果有很多条,需要一条一条地写, ...

  6. 【LeetCode题解】排序

    1. 排序 排序(sort)是一种常见的算法,把数据根据特定的顺序进行排列.经典的排序算法如下: 冒泡排序(bubble sort) 插入排序(insertion sort) 选择排序(selecti ...

  7. HBase应用快速学习

    HBase是一个高性能.面向列.可伸缩的开源分布式NoSQL数据库,是Google Bigtable的开源实现. HBase的思想和应用和传统的RDBMS,NoSQL等有比较大的区别,这篇文章从HBa ...

  8. 跟着刚哥梳理java知识点——异常（十一）

    异常:将程序执行中发生的不正常情况(当执行一个程序时,如果出现异常,那么异常之后的代码就不在执行.) java.lang.Throwable:异常的超类 1.Error:java虚拟机无法解决的严重问 ...

  9. PAT 1046

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

  10. C/C++常考面试题(一)

    这算是一个系列吧,记录一下在准备秋招期间,所准备的C++面试题,望秋招顺利.所有的面试题均来源于各大论坛,网络. C/C++常考面试题(一) 常用的C++数据结构有哪些? vector,序列式容器,相 ...