繁体   English   中英

将 hover 样式更改为可点击

[英]change the hover style to clickable

我一直在使用janko这个很棒的插件

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

唯一的问题是,我不想要hover 样式,如何使其成为可点击的标签而不是悬停的标签 请帮帮我,谢谢...

如果您查看实时示例 (http://www.jankoatwarpspeed.com/examples/AdvancedDocking/),您将看到这行代码:

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

将其更改为:

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

将 hover 更改为单击(或使用切换)。 您还需要更改一些 css:

删除:

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

将 display:none 更改为 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;}   

你必须改变“悬停”来切换它会起作用

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM