.click不工作

Question

我正在尝试点击并悬停（margin-left + border-bottom）.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');
});