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

我认为发生的事情是在脚本顶部定义的点击事件侦听器附加到对象，然后每次触发调整大小事件时，它附加附加的 - 但原始的并没有被破坏只是因为你依恋别人。您可以尝试在分配新的点击事件处理程序之前杀死任何点击事件处理程序，看看是否有帮助。

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

看起来像下面这样：

$('.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);
    });
});

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

希望对您有所帮助！

jQuery resize() 函数不起作用

jQuery resize() function doesn't work

jquery

resize

window