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隱藏,且最后一個背景顏色改變...


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM