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()的使用详解

toggle(fn1,fn2,fn3·····fnN);

相关推荐