jQuery 有两个合成事件 -- hover() 方法和 toggle() 方法, 类似 ready() 方法, hover() 方法和 toggle() 方法都属于 jQuery 自定义的方法.
1. hover() 方法
hover() 方法的语法结构为: hover(enter, leave);
hover() 方法用于模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第 1 个函数 (enter); 当光标移出这个元素时, 会触发指定的第 2 个函数 (leave).
将上面的例子改写成使用 hover() 方法, jQuery 代码如下:
- $(function(){
- $("#panel h5.head").hover(function(){
- $(this).next().show();
- },function(){
- $(this).next().hide();
- })
- })
代码运行后的效果与下面代码运行后的效果是一样的. 当光标滑过 "标题" 链接时, 相应的 "内容" 将被显示; 当光标滑出 "标题" 链接后, 相应的 "内容" 则被隐藏.
- $(function(){
- $("#panel h5.head").mouseover(function(){
- $(this).next().show();
- }).mouseout(function(){
- $(this).next().hide();
- })
- })
注意:(1) CSS 中有伪类选择符, 例如 ":hover", 当用户光标悬停在元素上时, 会改变元素的外观. 在大多数符合规范的浏览器中, 伪类选择符可以用于任何元素. 然而在 IE 6 浏览器中, 伪类选择符仅可用于超链接元素. 对于其他元素, 可以使用 jQuery 的 hover() 方法.
(2) hover() 方法准确来说是替代 jQuery 中的 bind("mouseenter") 和 bind("mouseleave"), 而不是替代 bind("mouseover") 和 bind("mouseout") . 因此当需要触发 hover() 方法的第 2 个函数时, 需要用 trigger("mouseleave") 来触发, 而不是 trigger("mouseout").
2. toggle() 方法
toggle() 方法的语法结构为: toggle(fn1, fn2, ...fnN);
toggle() 方法用于模拟鼠标连续单击事件. 第 1 次单击元素, 触发指定的第 1 个函数 ( fn1 ) ; 当再次单击同一元素时, 则触发指定的第 2 个函数 ( fn2); 如果有更多函数, 则依次触发, 直到最后一个. 随后的每次单击都重复对这几个函数的轮番调用.
在前面的加强效果的例子中, 使用了以下 jQuery 代码:
- $(function(){
- $("#panel h5.head").bind("click",function(){
- var $content = $(this).next();
- if($content.is(":visible")){
- $content.hide();
- }else{
- $content.show();
- }
- })
- })
虽然上面的代码能实现需要的效果, 但是选择的方法并不是最适合的. 如果需要连续单击 "标题" 链接, 来达到使 "内容" 隐藏和显示的目的, 那么很适合使用 toggle() 方法. 代码如下:
- $(function(){
- $("#panel h5.head").toggle(function(){
- $(this).next().show();
- },function(){
- $(this).next().hide();
- })
- })
通过使用 toggle() 方法不仅实现了同样的效果, 同时也简化了代码.
toggle() 方法在 jQuery 中还有另外一个作用: 切换元素的可见状态. 如果元素是可见的, 单击切换后则为隐藏; 如果元素是隐藏的, 单击切换后则为可见的. 因此上面的代码还可以写成如下 jQuery 代码:
- $(function(){
- $("#panel h5.head").toggle(function(){
- $(this).next().toggle();
- },function(){
- $(this).next().toggle();
- })
- })
- // 也可以写成下面的代码
- /*$(function(){
- $("#panel h5.head").click(function(){
- $(this).next().toggle();
- })
- })*/
3. 再次加强效果
为了能有更好的用户体验, 现在需要在用户单击 "标题" 链接后, 不仅显示 "内容", 而且高亮显示 "标题". 为了完成这一功能, 首先在 CSS 中定义一个高亮的样式, CSS 代码如下:
- .highlight{ background:#FF3300;}
- $(function(){
- $("#panel h5.head").toggle(function(){
- $(this).addClass("highlight");
- $(this).next().show();
- },function(){
- $(this).removeClass("highlight");
- $(this).next().hide();
- });
- })
来源: http://www.bubuko.com/infodetail-2991998.html