javascript - 切换而不是悬停函数 jQuery

Question

每次单击代码中指定的类时，我都想重复相同的过程。它在悬停功能上工作，但当我切换到点击功能时，它只完成一次工作。而且它是不可重复的。

我也切换到 clickToggle，但它不起作用。有什么想法吗？

var sidebarFloat = $('.sidebar').css('float');
$('.sidebar').hover(function() {
    sidebarFloat = $(this).css('float');

    if (sidebarFloat == 'right') {
        $(this).stop().animate({
            left: "0px"
        }, 500)
    } else if (sidebarFloat == 'left') {
        $(this).stop().animate({
            left: "0px"
        }, 500)
    }
}, function() {
    var width = $(this).width() - 10;
    if (sidebarFloat == 'right') {
        $(this).stop().animate({
            left: +width
        }, 500);

    } else if (sidebarFloat == 'left') {
        $(this).stop().animate({
            left: -width
        }, 500);
    }
});

Answer 1

jquery hover()函数接受两个函数作为参数:handleIn 和 HandleOut。

Click does not.

因此，您必须使用单独的变量来跟踪点击的状态。

例如:

var sidebarFloat = $('.sidebar').css('float');
var toggled = false;
$('.sidebar').click(function() {
    if (toggled) {
        sidebarFloat = $(this).css('float');
        if (sidebarFloat == 'right') {
            $(this).stop().animate({
                left: "0px"
            }, 500)
        } else if (sidebarFloat == 'left') {
            $(this).stop().animate({
                left: "0px"
            }, 500)
        }
    } else {
        var width = $(this).width() - 10;
        if (sidebarFloat == 'right') {
            $(this).stop().animate({
                left: +width
            }, 500);

        } else if (sidebarFloat == 'left') {
            $(this).stop().animate({
                left: -width
            }, 500);
        }
    }
    toggled = !toggled;
});