Question

我创建了一个可以滑入和滑出导航栏的面板（div）。现在，它一旦开启和关闭就好了，但它不再响应点击。

$('.work-link').mouseover(function(){
    if($('.work-link').css('left') === '0px')
    {
        $('.work-link').off('click');
    }
    else if($('.work-link').css('left') === '-750px')
    {
        $('.work-link').on('click');
    };
});

$('.work-link').on('click', function(){
    $('.work-link').animate({left: '0px'}, 600);
    $('.work-link').css('cursor', 'default');
    $('.sort-container').animate({marginLeft: '0px'}, 800);
    $('.exit-sort').fadeIn(600);
    $('.port-type').animate({marginRight: '140px'}, 600);
    $('.port-type').text("CLICK THE X TO CLOSE").fadeIn();
});

$('.exit-sort').on('click',function(){
    $('.work-link').animate({left: '-750px'}, 600);
    $('.work-link').css('cursor', 'pointer');
    $('.sort-container').animate({marginLeft: '-750px'}, 700);
    $('.exit-sort').fadeOut(600);
    $('.port-type').animate({marginRight: '70px'}, 600);
    $('.port-type').text("SORT THIS PORTFOLIO BY TYPE").fadeIn();
});

我认为问题与我如何使用.on（）和.off（）事件有关，但我不知道如何处理它。我做错了什么？

Answer 1

当您致电.off()时，会忽略点击事件处理程序。要重新打开它，您必须使用事件回调再次调用.on()函数（就像您第一次调用一样）。

也就是说，您的.mouseover()来电需要像这样更改：

$('.work-link').mouseover(function(){
    if($('.work-link').css('left') === '0px')
    {
        $('.work-link').off('click');
    }
    else if($('.work-link').css('left') === '-750px')
    {
        $('.work-link').on('click', function(){
            $('.work-link').animate({left: '-750px'}, 600);
            $('.work-link').css('cursor', 'pointer');
            $('.sort-container').animate({marginLeft: '-750px'}, 700);
            $('.exit-sort').fadeOut(600);
            $('.port-type').animate({marginRight: '70px'}, 600);
            $('.port-type').text("SORT THIS PORTFOLIO BY TYPE").fadeIn();
        });
    };
});

PS：验证语法/拼写错误，因为我无法测试您的代码。

Answer 2

你可以试试这个：而不是让鼠标悬停处理程序只使用点击处理程序中的条件，如下所示，这样你就不必一次又一次地打开/关闭点击处理程序。

注意： - 您应该使用$(this)代替$('.work-link')，这将是脚本的额外负载。 $(this)是点击元素的对象。

$('.work-link').on('click', function(){
    if($(this).css('left') === '0px')
    {
        return true;
    }
    else if($(this).css('left') === '-750px')
    {
       $('.work-link').animate({left: '0px'}, 600);
       $('.work-link').css('cursor', 'default');
       $('.sort-container').animate({marginLeft: '0px'}, 800);
       $('.exit-sort').fadeIn(600);
       $('.port-type').animate({marginRight: '140px'}, 600);
       $('.port-type').text("CLICK THE X TO CLOSE").fadeIn();
    }
});

JQuery .click事件不再转回

2 个答案: