首页 > 代码库 > js中toggle()及toggleClass()的使用详解

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

2024-09-24 13:16:52   219人阅读

在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="http://www.mamicode.com/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="http://www.mamicode.com/#">尾品汇</a></li>
63         <li><a href="http://www.mamicode.com/#">图书音像数字管</a></li>
64         <li><a href="http://www.mamicode.com/#">美妆个护</a></li>
65         <li><a href="http://www.mamicode.com/#">家具、家纺、家装</a></li>
66         <li><a href="http://www.mamicode.com/#">鞋靴、箱包</a></li>
67         <li><a href="http://www.mamicode.com/#">珠宝装饰</a></li>
68         <li><a href="http://www.mamicode.com/#">手表/眼镜/礼品</a></li>
69         <li><a href="http://www.mamicode.com/#">运动户外</a></li>
70         <li><a href="http://www.mamicode.com/#">食品、茶、酒</a></li>
71         <li><a href="http://www.mamicode.com/#">手机、数码</a></li>
72         <li><a href="http://www.mamicode.com/#">电脑办公</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隐藏,且最后一个背景颜色改变...

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


联系
我们