将悬停样式更改为可点击

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 后,所有选项卡都消失了

以上是关于将悬停样式更改为可点击的主要内容,如果未能解决你的问题,请参考以下文章

在图像鼠标悬停时在父 div 中显示大的可点击图像

如何将 UITableView 高度更改为其内容高度并且仍然具有可点击的内容?

将复选框更改为切换样式按钮

将鼠标光标更改为类似锚的样式

为啥在移动设备上点击时会应用悬停样式?

iOS 开发:如何在点击 UITableViewCell 时将其更改为可编辑的 UITextField?