【皇甫】☀独一无二

♪谁手中真有把握
♪时间紧迫　那份爱水深火热
♪立刻要做出选择
♪空前绝后　明知道就别错过
♪他或她没有强弱
♪随时交换角色
♪就当做插播
♪你就很独特
♪如何　让爱决定你够不够资格
♪如何　我觉得你独一无二
♪如何　让爱证明我们情投意合
♪就凭　我绝对是独一无二

♪ ♪ ♪ ♪  ♪  ♪ ♪ ♪  ♪   ♪   ♪   ♪   ♪

听着"独一无二"然我们继续看"独一无二" (音乐响起来~)♪♪♪

补充上节内容:

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();
    });
});

下篇 冒泡事件