4.1.3: jQuery的合成事件

浏览数：31 / 时间：2015年06月09日

jQuery有两个合成事件---hover()方法和toggle()方法。

1. hover()方法：

hover()方法的语法结构为:

hover(enter,leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数；当光标移出这个元素时，会触发指定的第二个函数。

 1 <script src="jQuery/jquery-1.10.2.js"></script>
 2 <script type="text/javascript">
 3     $(function(){
 4         $("#panel h5.head").hover(function(){
 5             $(this).next("div.content").show();
 6         },function(){
 7             $(this).next("div.content").hide();
 8         });
 9     });
10 </script>

2. toggle()方法：

toggle()方法的语法结构为:

toggle(fn1,fn2,...fnN);

toggle()方法用于模拟鼠标连续单击事件。第一次单击元素触发指定的第一个函数；当再次单击同一元素时，则触发指定的第二个函数；如果有更多函数，则依次触发，直至最后一个。随后的每次单击都重复对这几个函数的轮番调用。注意，对于高版本的jQuery库，这样的描述已经不对，这里只针对jQuery1.3.1.js。

在前面的加强效果的例子中，使用了以下jQuery代码:

 1 <script src="jQuery/jquery-1.3.1.js"></script>
 2 <script type="text/javascript">
 3     $(function(){
 4         $("#panel h5.head").bind("click",function(){
 5             var $content=$(this).next("div.content");
 6             if($content.is(":visible")){
 7                 $content.hide();
 8             }else{
 9                 $content.show();
10             }
11         });
12     });
13 </script>

虽然上面的代码能实现需要的效果，但是选择的方法并不是最适合的。因为需要连续单击"标题"链接，来达到使"内容"隐藏和显示的目的，所以很适合使用toggle()方法。使用toggle()方法来改写上面的例子，代码如下：

 1 <script src="jQuery/jquery-1.3.1.js"></script>
 2 <script type="text/javascript">
 3     $(function(){
 4         $("#panel h5.head").toggle(function(){
 5             $(this).next("div.content").show();
 6         },function(){
 7             $(this).next("div.content").hide();
 8         });
 9     });
10 </script>

通过使用toggle()方法不仅实现了同样的效果，同时也简化了代码。

toggle()方法在jQuery中还有另外一个作用：切换元素的可见状态。如果元素是可见的，单击切换后则为隐藏；如果元素是隐藏的，单击切换后则为可见的。因此上面的代码还可以写成如下形式：

 1 <script src="jQuery/jquery-1.3.1.js"></script>
 2 <script type="text/javascript">
 3     $(function(){
 4         $("#panel h5.head").toggle(function(){
 5             $(this).next("div.content").toggle();
 6         },function(){
 7             $(this).next("div.content").toggle();
 8         });
 9     });
10 </script>

3. 再次加强效果：

为了能有更好的用户体验，现在需要在用户单击"标题"链接后，不仅显示"内容"，而且高亮显示"标题"。

.highlight{
    background:#FF3300
}

 1 <script src="jQuery/jquery-1.3.1.js"></script>
 2 <script type="text/javascript">
 3     $(function(){
 4         $("#panel h5.head").toggle(function(){
 5             $(this).addClass("highlight");
 6             $(this).next("div.content").show();
 7         },function(){
 8             $(this).removeClass("highlight");
 9             $(this).next("div.content").hide();
10         });
11     });
12 </script>