標籤：ati add htm splay ref 移除 last ogg 改變
在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隱藏,且最後一個背景顏色改變...
js中toggle()及toggleClass()的使用詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
