切换而不是悬停函数jQuery

I want to repeat the same process everytime I click on the class specified in the code. It was working on hover function but when I switched to click function, it does the job one time only. and it's not repeatable.

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

Also I switched to clickToggle and it does not work. Any thoughts?

我也切换到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);
    }
});

1 个解决方案

#1

The jquery hover() function takes two functions as parameters: handleIn and HandleOut.

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

Click does not.

点击没有。

As a result you will have to track the state of the click using a separate variable.

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

For example:

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;
});

#1