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 に答える