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 ...
- UNION ALL合表查询
有时候需要连表查询数据,可以使用union all来做合表. 语法: SELECT column_name FROM table1UNION ALLSELECT column_name FROM ta ...
- emmet(快速开发)的使用
emmet可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发. 比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...
- Java排序算法之堆排序
堆的概念: 堆是一种完全二叉树,非叶子结点 i 要满足key[i]>key[i+1]&&key[i]>key[i+2](最大堆) 或者 key[i]<key[i+1] ...
- js根据条件json生成随机json:randomjson
前端开发中,在做前后端分离的时候,经常需要手写json数据,有3个问题特别揪心: 1,数据是写死的,不能按一定的条件随机生成长度不一,内容不一的数据 2,写数组的时候,如果有很多条,需要一条一条地写, ...
- 【LeetCode题解】排序
1. 排序 排序(sort)是一种常见的算法,把数据根据特定的顺序进行排列.经典的排序算法如下: 冒泡排序(bubble sort) 插入排序(insertion sort) 选择排序(selecti ...
- HBase应用快速学习
HBase是一个高性能.面向列.可伸缩的开源分布式NoSQL数据库,是Google Bigtable的开源实现. HBase的思想和应用和传统的RDBMS,NoSQL等有比较大的区别,这篇文章从HBa ...
- 跟着刚哥梳理java知识点——异常(十一)
异常:将程序执行中发生的不正常情况(当执行一个程序时,如果出现异常,那么异常之后的代码就不在执行.) java.lang.Throwable:异常的超类 1.Error:java虚拟机无法解决的严重问 ...
- PAT 1046
1046. Shortest Distance (20) The task is really simple: given N exits on a highway which forms a sim ...
- C/C++常考面试题(一)
这算是一个系列吧,记录一下在准备秋招期间,所准备的C++面试题,望秋招顺利.所有的面试题均来源于各大论坛,网络. C/C++常考面试题(一) 常用的C++数据结构有哪些? vector,序列式容器,相 ...