[英]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.