3

使用 Jquery，当您单击按钮时，我可以简单地向下滑动 div。 问题是，按钮 :hover 状态没有被删除。

JS 小提琴：http: //jsfiddle.net/Y6gHb/9/

（小记，在我的网站版本上，我实际上需要再次将鼠标悬停在按钮上，然后将鼠标移出，以使其恢复正常状态）。

这是JS代码：

   $("a").click(function() {
        var div = $("#toggleDiv"); 
        if (!div.hasClass("open")) {
            div.animate({
                height: "300px"
            },"fast").addClass("open");
        } else {
            div.animate({
                height: "150px"
            },"fast").removeClass("open");

        }
        return false;
    });

正如您将在小提琴中看到的那样，幻灯片后链接保持红色。在这个简单的例子中，这看起来不是什么大问题，但在我的网站上，这真的很烦人。

我的问题是：

难道我做错了什么？或者如何在点击时删除 :hover 状态？

（我对 Twitter 引导工具提示有类似的问题）。

4

1 回答 1

1

在我的测试中，每当我移动鼠标时它就会自行移除，但让链接“悬停”仍然令人不快。你可以这样欺骗它：

$(this).unbind('onmouseover').unbind('onmouseout');

但是，如果您为这些事件绑定了事件，则应在删除它们后重新附加。

这仅适用于您有这样的情况：

$("a").hover(function(){
//Do fancy stuff
});

所以你会做这样的事情：

    function hoverLinkEffect(e) {
        // Do fancy stuff                                
    }

//Then on the a click event handler
$(this).unbind('onmouseover').unbind('onmouseout').on('hover',hoverLinkEffect);

这是完整的代码：

$(document).ready(function() {

    $("a").click(function() {
        $(this).unbind('onmouseover').unbind('onmouseout');
        var div = $("#toggleDiv"); 
        if (!div.hasClass("open")) {
            div.animate({
                height: "300px"
            },"fast").addClass("open");
        } else {
            div.animate({
                height: "150px"
            },"fast").removeClass("open");

        }
        return false;
    });

});​
于 2012-10-18T05:51:13.400 回答