jQuery resize() 函数不起作用

Question

jQuery resize 函数不起作用。我想在 767 宽度的设备中提供自定义滚动，但它不起作用。一般767以上的设备滚动都可以。我该如何解决？如果我只用$(window).resize 函数给出一个条件，那么它也可以工作，但是当我给else 条件时，它又不能工作。

    var about_us = $('#aboutus_area').offset();
    var testimonial = $('#testimonial').offset();
    var contact = $('#contact').offset();
    $('.aboutus_area').on('click',function(e){
        e.preventDefault();
        $('html,body').animate({ scrollTop : about_us.top },500);
    });

    $('.testimonial').on('click',function(e){
        e.preventDefault(); 
        $('html,body').animate({ scrollTop : testimonial.top },500);
    });

    $('.contact').on('click',function(e){
        e.preventDefault(); 
        $('html,body').animate({ scrollTop : contact.top },500);
    });  

$(window).resize(function(){

    if( $(window).width()<768 ){

        navbar = $('.navbar-collapse').height();
        var about_us = $('#aboutus_area').offset().top+navbar;
        var testimonial = $('#testimonial').offset().top+navbar;
        var contact = $('#contact').offset().top+navbar;
        $('.aboutus_area').on('click',function(e){
            e.preventDefault();
            $('html,body').animate({ scrollTop : about_us },500);
        });

        $('.testimonial').on('click',function(e){
            e.preventDefault(); 
            $('html,body').animate({ scrollTop : testimonial },500);
        });

        $('.contact').on('click',function(e){
            e.preventDefault(); 
            $('html,body').animate({ scrollTop : contact },500);
        });         

    }

});

Answer 1

我认为发生的事情是脚本顶部定义的单击事件侦听器附加到对象，然后每次调整大小事件触发时，它都会附加其他事件 - 但原始事件不会仅仅因为你附加了其他人。您可以在分配新的单击事件处理程序之前尝试杀死任何单击事件处理程序，看看是否有帮助。

不过，可能有一个更简单的解决方案。由于您真正关心的事件是点击，为什么不在点击事件触发时检查窗口宽度？

看起来像下面这样：

$('.aboutus_area').on('click', function (e) {
    e.preventDefault();

    var top = $('#aboutus_area').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

$('.testimonial').on('click', function (e) {
    e.preventDefault();

    var top = $('#testimonial').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

$('.contact').on('click', function (e) {
    e.preventDefault();

    var top = $('#contact').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

由于很多代码是重复的，你可以用一个循环来缩短它，它可能看起来像这样：

var elements = ["aboutus_area", "testimonial", "contact"];

elements.forEach(function (key) {
    $('.' + key).on('click', function (e) {
        e.preventDefault();

        var top = $('#' + key).offset().top;

        //If window is < 768px wide, adjust scroll position
        if ($(window).width() < 768) {
            top += $('.navbar-collapse').height();
        }

        $('html,body').animate({scrollTop: top}, 500);
    });
});

免责声明：我没有测试过上面的代码，所以最好将它视为伪代码，而不是你可以丢弃的代码，它就可以工作。可能需要一两次调整才能在您的项目中发挥作用，但我认为这个想法是合理的。

希望这会有所帮助！