js中toggle（）及toggleClass（）的使用详解
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
js中toggle（）及toggleClass（）的使⽤详解
在javascript中toggle()为连续点击事件,当⾥⾯含有多个function(){}函数时,每次点击依次执⾏⾥⾯的function的函数,直⾄最后⼀个.随后每次点击都重复对这⼏个函数的轮番调⽤,toggle的语法如下
toggle(fn1,fn2,fn3·····fnN);
但当toggle（），不带参数时,与show()和hide()的作⽤⼀样,切换元素的可见状态,如果元素是可见的,则切换为隐藏状态;如果元素是隐藏的则切换为可见状态,此时括号内可添加()毫秒(如1000)等),slow,normal,fast等;
toggleClass( )与toggle( )差不多,如果⾥⾯含有class样式则移除,没有的话则添加;其事例代码如下:
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8">
4 <title>FAQ列表</title>
5 <style type="text/css" >
6 *{
7 margin:0px;
8 padding:0px;
9 font-size:12px;
10 }
11
12 a{
13 color:#000;
14 text-decoration:none;
15 }
16 #menu{
17 margin:30px;
18 width:188px;
19 background-color:#EFFDFA;
20
21 }
22 .top{
23 height:40px;
24 line-height:40px;
25 font-size:14px;
26 font-weight:bold;
27 text-align:center;
28 border:1px solid #93D6C5;
29 border-bottom:none;
30 }
31 .nav{
32 list-style:none;
33
34 }
35 li{
36 display:block;
37 height:30px;
38 line-height:30px;
39 border:1px solid #93D6C5;
40 border-top:none;
41 padding-left:30px;
4243 }
44 .lastone{
45 border:none;
46 cursor:pointer;
47 background-color:red;
48 }
49 .up{
50 border:none;
51 cursor:pointer;
52 background-color:blue;
53 }
54
55 </style>
56 <script src="js/jquery-1.12.4.js"></script>
57 </head>
58 <body>
59 <div id="menu">
60 <div class="top">全部商品详细分类</div>
61 <ul class="nav">
62 <li><a href="#">尾品汇</a></li>
63 <li><a href="#">图书⾳像数字管</a></li>
64 <li><a href="#">美妆个护</a></li>
65 <li><a href="#">家具、家纺、家装</a></li>
66 <li><a href="#">鞋靴、箱包</a></li>
67 <li><a href="#">珠宝装饰</a></li>
68 <li><a href="#">⼿表/眼镜/礼品</a></li>
69 <li><a href="#">运动户外</a></li>
70 <li><a href="#">⾷品、茶、酒</a></li>
71 <li><a href="#">⼿机、数码</a></li>
72 <li><a href="#">电脑办公</a></li>
73 <li class="lastone"></li>
74 </ul>
75 </div>
76 <script>
77
78 $(function(){
79 $("li:last").click(function(){
80 $("li:not(li:last):gt(6)").toggle("slow");
81 $("li:last").toggleClass("lastone");
82 $("li:last").toggleClass("up");
83 });
84 })
85 </script>
86 </body>
87 </html>
点击最后⼀个将后(不包括最后⼀个)的四个li隐藏,且最后⼀个背景颜⾊改变...。