jquery - .click 不工作

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

在 jQuery 中，click()不接受 2 个函数参数。

你需要使用的是mousedown()和mouseup()

甚至更好的是，您可以避免使用 JavaScript 并像这样构建 CSS：

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

Answer 3

正如我在评论中提到的，只需添加 toggleClass 吗？

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