在javascript中toggle()為連續點擊事件,當裡面含有多個function(){}函數時,每次點擊依次執行裡面的function的函數,直至最後一個.隨後每次點擊都重覆對這幾個函數的輪番調用,toggle的語法如下 toggle(fn1,fn2,fn3·····fnN); 但當toggl ...
在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隱藏,且最後一個背景顏色改變...
