将悬停样式更改为可点击
Posted
技术标签:
【中文标题】将悬停样式更改为可点击【英文标题】:change the hover style to clickable 【发布时间】:2011-07-14 04:28:53 【问题描述】:我一直在使用 janko 的这个很棒的插件
http://www.jankoatwarpspeed.com/post/2009/06/01/Advanced-docking-using-jQuery.aspx
唯一的问题是,我不想要 悬停样式,如何使它成为 可点击标签 而不是 悬停标签 ?请帮帮我,谢谢...
【问题讨论】:
【参考方案1】:如果您查看实时示例 (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;
将 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;
【讨论】:
我不认为你可以在点击中使用双重功能可以吗? 你也可以使用切换来代替点击 @user645607 你是对的。我更新了答案。它以前工作过,但从技术上讲,第二个函数没有做任何事情。 好的。是的,确实如此,我认为第二个功能使幻灯片菜单滑出屏幕。 是的,它与悬停有关,但与单击无关。【参考方案2】:你必须改变“悬停”来切换,它会工作
$("#dock li").toggle(
function()
$(this).find("ul")
.animate(left:"40px", 200);
,
function()
$(this).find("ul.free")
.animate(left:"-180px", 200);
);
【讨论】:
如何让面板保持打开状态,直到我再次点击它? 这应该让它保持打开状态,直到再次点击它 不,当我将鼠标移动到页面的其他区域时,它会关闭它的左侧 hmm.. 好吧,哦,切换重命名为 slideToggle 我将其重命名为 slideToggle 后,所有选项卡都消失了以上是关于将悬停样式更改为可点击的主要内容,如果未能解决你的问题,请参考以下文章