我一直在使用 janko
这个很棒的插件http://www.jankoatwarpspeed.com/post/2009/06/01/Advanced-docking-using-jQuery.aspx
唯一的问题是,我不想要悬停样式,如何将其作为可点击标签而不是悬停标签 ?请帮帮我,谢谢...
答案 0 :(得分:4)
如果你查看实例(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);
}
});
将鼠标悬停更改为单击(或使用切换)。您还需要更改一些css:
删除:
#dock > li:hover ul {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;}
答案 1 :(得分:1)
你必须将“悬停”更改为切换,它才能正常工作
$("#dock li").toggle(
function()
{
$(this).find("ul")
.animate({left:"40px"}, 200);
},
function()
{
$(this).find("ul.free")
.animate({left:"-180px"}, 200);
});