将 hover 样式更改为可点击

Question

i've been using this awesome plugin from janko

http://www.jankoatwarpspeed.com/post/2009/06/01/Advanced-docking-using-jQuery.aspx

the only problem is, i don't want the hover style , how to make it as a clickable tab rather than hovering tab ? please help me, thank you...

Answer 1

If you view the live example (http://www.jankoatwarpspeed.com/examples/AdvancedDocking/) you will see this line of code:

$("#dock li").hover(function(){
            $(this).find("ul").animate({left:"40px"}, 200);
        }, function(){
            $(this).find("ul.free").animate({left:"-180px"}, 200);
       });

Change it to this:

$("#dock li").click(function(){
    if($(this).find("ul").css("left") != "40px")    {
    $(this).find("ul").animate({left:"40px"}, 200);
}
else
{
    $(this).find("ul").animate({left:"-180px"}, 200);
}
});

Change hover to click (or use toggle). You will also need to change some css:

Delete:

#dock > li:hover ul {display:block;}

Change display:none to display:block

#dock > li ul {position:absolute; top:0px; left:-180px;  z-index:-1;width:180px; display:block;
                   background-color:#F1F1F1; border:solid 1px #969696; padding:0px; margin:0px; list-style:none;}   

Answer 2

you would have to change the "hover" to toggle and it would work

$("#dock li").toggle(
    function()
    {
        $(this).find("ul")
               .animate({left:"40px"}, 200);
    }, 
    function()
    {
        $(this).find("ul.free")
               .animate({left:"-180px"}, 200);
    });