jquery的toggle

1。
 1 <html>
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 4         <title>事件处理之CSS效果切换</title>
 5         <style type="text/css">
 6             .buttons {
 7                 width: 100px;
 8                 float: left;
 9                 text-align: center;
10                 margin: 5px;
11                 border: 1px solid;
12                 font-weight: bold;
13             }
14             .hover {
15                 cursor: crosshair;
16                 color: blue;
17                 background-color:#008000;
18             }
19         </style>
20         <script src="../jquery-1.5.2.js" type="text/javascript"></script>
21         <script type="text/javascript">
22             $(document).ready(function(){
23                 /*
24                  * .toggleClass(class)
25                  * 是在指定的元素上应用CSS类（如果尚未应用），或者删除CSS类（如果已经应用）
26                  * 
27                  * .toggle(handler1, handler2)
28                  * handler1在事件偶数次发生时执行，从0开始计数
29                  * handler2在事件奇数次发生时执行
30                  */
31                 //$('.buttons').click(function(){
32                     //$(this).toggleClass('hover');
33                 //});
34                 
35                 //下面几行代码同上面是等效的
36                 //toggle切换 trigger触发
37                 $('.buttons').toggle(
38                     function(){
39                         $(this).addClass('hover');
40                     },
41                     function(){
42                         $(this).removeClass('hover');
43                     }
44                 );
45                 
46                 
47             });
48             
49         </script>
50         <body>
51             <span class="bold buttons">Bold Button</span>
52             <span class="italic buttons">Italic Button</span>
53         </body>
54 </html>
posted on 2017-01-21 22:28 Sharpest 阅读(195) 评论(0) 编辑收藏举报