js中toggle()及toggleClass()的使用详解

时间：2022-05-16 02:26:48

在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&period;js中处理页面闪烁的方法详解

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

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

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

  3. js中的Object&period;defineProperty&lpar;&rpar;和defineProperties&lpar;&rpar;详解

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

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

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

  5. JS中的事件委托&sol;事件代理详解

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

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

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

  7. js中prototype与&lowbar;&lowbar;proto&lowbar;&lowbar;的关系详解

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

  8. js数组中foEach和map的用法详解 jq中的&dollar;&period;each和&dollar;&period;map

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

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

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

随机推荐

  1. LintCode Anagrams

    (记得import java.util.HashMap及Arrays, 首先字符串若为空或者数量为零, 则返回一个空的LinkedList) 1. 把string变为char数组, 再进行排序, 之后 ...

  2. 【Bootstrap基础学习】00 序

    其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQu ...

  3. UVa 753 &lpar;二分图最大匹配&rpar; A Plug for UNIX

    题意: 有n个插座,m个设备以及k种转化器(每种转化器视为有无限个). 转换器A->B可以将A类型的插头转化成B类型的插头,所以可以插在B类型的插座上. 求最少剩多少不匹配的设备. 分析: 抛开 ...

  4. Windows 不能在 本地计算机 启动 SQL Server&lpar;MSSQLSERVER&rpar;。错误码126

    结合自己的解决方案和网络上搜到的内容,现总结如下: 首先你要知道问题出在了什么地方才能针对性处理. 1.打开事件查看器 计算机右击——管理 右侧会出现错误列表,在其中找到SQL server有关的查看 ...

  5. android面试手册

    1. Android dvm的进程和Linux的进程, 应用程序的进程是否为同一个概念 DVM指dalivk的虚拟机.每一个Android应用程序都在它自己的进程中运行,都拥有一个独立的Dalvik虚 ...

  6. 【Java并发&period;6】结构化并发应用程序

    6.1 在线程中执行任务 应用程序提供商希望程序支持尽可能多的用户,从而降低每个用户的服务成本,而用户则希望获得尽可能快的响应.大多数服务器应用程序都提供了一种自然的任务边界选择方式:以独立的客户请求 ...

  7. 有时候做JQ动画，鼠标经过，它会不停自己抖动不停，解决方法（此处，是兼容IE ，当鼠标经过，遮罩层从下移到上边的JQ动画效果）

    <style> .x_sdbb { margin: 60px 0 40px 0; } .x_title2{ background: url(../images/hdb_img17.png) ...

  8. POJ 3415 Common Substrings（长度不小于K的公共子串的个数&plus;后缀数组&plus;height数组分组思想&plus;单调栈）

    http://poj.org/problem?id=3415 题意:求长度不小于K的公共子串的个数. 思路:好题!!!拉丁字母让我Wa了好久!!单调栈又让我理解了好久!!太弱啊!! 最简单的就是暴力枚 ...

  9. C&num; WinForm页面切换导致闪烁的解决方法

    问题描述 界面上放置大量的控件(尤其是自定义控件)会导致在窗体加载时,速度变得缓慢:当切换页面时,也会时常产生闪烁的问题,非常影响用户体验. 解决方法 将此代码写在要解决闪烁问题的父窗体中: prot ...

  10. element-ui table

    额,最近有点频繁记录.感觉遇到了很多的问题.然后不断的查,不断的尝试修改.然后得到解决.还是记录关于element-ui的使用.这次是关于表格的使用. 表格使用其实平时用的话也就那么几个属性.虽然官网 ...

相关文章