js中toggle()及toggleClass()的使用详解
在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()的使用详解的更多相关文章
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- Js中this用法及注意点详解
我们在写js时,特别是用到回调函数时,经常会发现this指代的对象总是可能脱离自己的思路而发生改变.面向对象语言的特性告诉我们this始终指代它的调用者,而在js中回调函数中内部的this ...
- js中的Object.defineProperty()和defineProperties()详解
ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...
- node.js 中模块的循环调用问题详解
首先,我们看一下图示代码,每一个注释其实代表一个 js 文件.所以下面其实是三个 js 文件 .第一个是我们要运行的 main 文件,后面两个是 a, b 文件. 从上面可以看书 a ,b 两个模 ...
- JS中的事件委托/事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js中事件冒泡,事件捕获详解
一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...
- js中prototype与__proto__的关系详解
一.构造函数: 构造函数:通过new关键字可以用来创建特定类型的对象的函数.比如像Object和Array,两者属于内置的原生的构造函数,在运行时会自动的出现在执行环境中,可以直接使用.如下: var ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- js正则实现二代身份证号码验证详解
js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...
随机推荐
- ksum问题
2sum: Given an array of integers, return indices of the two numbers such that they add up to a speci ...
- laravel blade $loop
laravel 5.3 blade 新增$loop变量 文档如下: 在Laravel 5.3中,@foreach指令提供了更加强大的功能,在每一个@foreach循环体中都可以调用一个新的$loop变 ...
- Mybatis基础学习(一)—初识MyBatis
一.MyBatis是什么? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google co ...
- Vxlan与网卡offload性能
背景 由于数据链路层MTU的限制,发送端TCP/UDP数据在交付到IP层时需要与MTU相匹配,TCP数据不能超过mss,较长的UDP需要分片(Fragmentation)以满足MTU要求:接收端协议栈 ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- ios 检测屏幕方向
方法一:通知中心监听 name: // UIDeviceOrientationDidChangeNotification 允许方向改变的情况下,监听设备方向,与电池条无关 // UIApplica ...
- 基础:获得servletAPI
package com.learning.web.action; import javax.servlet.ServletContext; import javax.servlet.http.Http ...
- SAP RFC函数远程调试跟踪管理软件
最近在搞OA系统与sap的接口开发,接口太多老是和.net的开发人员打嘴仗,为了避免不必要的纠结,自己做了一个rfc的调试工具,有些问题调试起来也比较容易了.程序是delphi开发的,为了保证程序可以 ...
- Java 代码安全(一) —— 避免用String储存敏感数据
Java 代码安全(一) -- 避免用String储存敏感数据 如果重要的数据(保存在内存中)在使用后没有及时清理,有可能会导致信息泄漏.开发人员通常都回用String 保存敏感数据(密码, ...
- java线程的实现
一共有两种方法Thread类和Runnable接口,相对来讲,更趋向于用Runnable因为一个类可以实现多个接口,但是只能继承一个类,所以相对来说倾向用Runnable 第一种方法:用Thread其 ...