jquery - 。クリックが機能しない

Question

クリックしてホバー（マージン左+ボーダー下）したときにアクションを取得しようとしています。.hoverは問題ありません...しかし、.clickが機能しないので、これを試しました。

$(".border").hover(
    function(){
        $(this).switchClass( "border", "border_active", 500 );
        return false;
    }
    ,function(){
        $(this).switchClass( "border_active", "border", 400 );
        return false;
    }
);  
$(".border").click(
    function(){
        $(this).removeClass('border');
        $(this).addClass('border_active')
    }
    ,function(){
        $(this).removeClass('border_active');
        $(this).addClass('border');
    }
);

しかし、何もありません。ここにホールコードがあります：http：//jsfiddle.net/Fe6pE/13/、これを機能させるための最良の方法を教えてください、ありがとう

Answer 1

これを行うには、単に使用しtoggleClassます ;

$('.border').click(function() {
    $(this).toggleClass('border-active border');
});

これは、クラスを交互に変更するだけです。が最初からオンになっている場合border-activeは、クリックするとborder-activeオフになり、borderオンになります。

Answer 2

コメントで述べたように、toggleClass を追加するだけですか?

$(".border").click(function(){
    $(this).toggleClass('border');
    $(this).toggleClass('border_active');
});

Answer 3

jQuery では、click()関数の引数を 2 つ取りません。

代わりに使用する必要があるのはmousedown()、mouseup()

または、JavaScript を避けて、CSS を次のように構成することもできます。

.border {
    /* normal styles */
}
.border:hover {
    /* styles when hovered */
}
.border:active {
    /* styles when mouse is down */
}