将悬停样式更改为可点击答案

【问题标题】：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 后，所有选项卡都消失了