♪谁手中真有把握
♪时间紧迫 那份爱水深火热
♪立刻要做出选择
♪空前绝后 明知道就别错过
♪他或她没有强弱
♪随时交换角色
♪就当做插播
♪你就很独特
♪如何 让爱决定你够不够资格
♪如何 我觉得你独一无二
♪如何 让爱证明我们情投意合
♪就凭 我绝对是独一无二
♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪
听着"独一无二"然我们继续看"独一无二" (音乐响起来~)♪♪♪
补充上节内容:
toggle()方法
语法结构:toggle(fn1,···fnN);
toggle()方法用于模拟鼠标连续单击事件,第一次单击元素,触发指定的第一二函数(fn1);当再次点击同一元素时,则触发指定的第2个函数(fn2),如果有更多的函数,则依次触发,直到最后一个,随后的每次单击都重复对这几个函数轮番调用.在前面的加强效果的例子中,使用了下面jQuery代码:
$(function(){ $("#pane h5.head").bind(click".function(){ var #content $(this).next(); if(@content.is(":visible")){ $content.hide(); }else{ $content.show(); } }) })
虽然上面的代码能实现需要的效果,但是选择方法并不是最合适的,如果需要连续单击"标题"链接,来达到使"内容"隐藏和显示的目的,那么很适合使用toggle()方法,原理如下:
$(标题).toggle(function(){
//内容提示
}.function(){
//内容隐藏
});
jQuery Eg:
$(function(){ $("#pane h5.head").toggle(function(){ $(this).next().show(); }.function(){ $(this).next().hide(); }) });
通过使用toggle方法()在jQuery中还有另外一个作用:切换元素的可见状态,如果元素是可见的,单击切换后则为隐藏,反之一样,因此上面的代码可以写成一下jQuery代码:
$(function(){ $("#pane h5.head").toggle(function(){ $(this).next().toggle(); }.function(){ $(this).next().toggle(); }) });
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
补充内容讲完现在来讲讲这次要讲的话题吧 --------【学霸or学渣】 答:学渣
再次加强效果
为了能有更好的用户体验,现在需要在用户单击"标题"链接后,不仅显示"内容".而且高亮显示"标题",,为了完成这一功能,首先在CSS中定义一个高亮的样式,css代码如下:
,highlight{background:#FF3300;}
接下来需要完成一些几个步骤:
1.等待DOM装载完毕
2.找到"标题"元素,添加toggle()方法,在toggle()方法里定义两个函数,分别代表显示和隐藏
3.在显示函数里,给"标题"添加高亮class
4.在隐藏函数里,移除"标题"的高亮class,然后编写如下jQuery代码:
$(function(){ $("#pane1 h5.ead").toggle(function(){ $(this).addClass("highlight"); $(this).next().show(); }.function(){ $(this).removeClass("highlight"); $(this).next().hide(); }); });
下篇 冒泡事件