javascript - 禁用 jQuery 窗口大小功能

Question

我有一些 jQuery 需要根据窗口大小激活。

当前代码在页面加载时确实会正确触发，但如果我调整窗口大小，jQuery 不会根据屏幕大小启用或禁用

$(document).ready(function() {
var width = $(window).width();
if ((width < 980)) {
    $( '.navigation > ul > li > a' ).click(function() {
        if($(this).next('ul').is(':visible')){
            $(this).next("ul").slideUp(400);
        } else {
            $( '.navigation > ul > li > ul' ).slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $( '.navigation > ul > li > ul > li > a' ).click(function() {
        if($(this).next("ul").is(":visible")){
            $(this).next("ul").slideUp(400);
        } else {
            $( '.navigation > ul > li > ul > li > ul' ).slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $( '.menu-link' ).click(function() {
        if($(this).next("div").is(':visible')){
            $(this).next("div").slideUp(400);
        } else {
            $( '.navigation' ).slideUp(400);
            $(this).next('div').slideToggle(400);
        } 
    });

} 
});

实际上，我需要的是 jQuery 在 980px 的屏幕尺寸下触发并在该数字以上禁用。

作为额外的谷歌，我需要确保任何展开的元素都能够关闭或在页面大小超过 980px 时关闭，因为超过此大小，通常的 CSS 媒体查询将在悬停时生效。

我的代码的早期版本能够考虑动态窗口大小，但由于 jQuery 不再起作用，因此使展开的项目保持打开状态并且无法关闭。

如果有帮助的话，这里有一个 fiddle

Answer 1

您需要使用window.onresize方法。

编辑代码

// flag to check that events doesn't bind twice
var isNavigationEventsEnable = false;

// enable events
var enableNavigationEvents = function () {
    $(".navigation > ul > li > a").on('click.screen-lt-980', function () {
        if ($(this).next("ul").is(":visible")) {
            $(this).next("ul").slideUp(400);
        } else {
            $(".navigation > ul > li > ul").slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $(".navigation > ul > li > ul > li > a").on('click.screen-lt-980', function () {
        if ($(this).next("ul").is(":visible")) {
            $(this).next("ul").slideUp(400);
        } else {
            $(".navigation > ul > li > ul > li > ul").slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $(".menu-link").on('click.screen-lt-980', function () {
        if ($(this).next("div").is(":visible")) {
            $(this).next("div").slideUp(400);
        } else {
            $(".navigation").slideUp(400);
            $(this).next("div").slideToggle(400);
        }
    });
}

// disable events
var disableNavigatioEvents = function () {
    $(".navigation > ul > li > a").off('click.screen-lt-980');
    $(".navigation > ul > li > ul > li > a").off('click.screen-lt-980');
    $(".menu-link").off('click.screen-lt-980');
}

// call this method on window resize
var redesignScreen = function () {
    //function (e) { // comment this line
        var width = $(window).width();
        if ((width < 980)) {
            if (!isNavigationEventsEnable) {
                isNavigationEventsEnable = true;
                enableNavigationEvents();
            }
        } else {
            isNavigationEventsEnable = false;
            disableNavigatioEvents();
        }
    //} // comment this line
}

$(document).ready(function () {
    // attach onresize function
    window.onresize = redesignScreen;

    // calling redesignScreen initially
    redesignScreen();
});

JSFiddle:http://jsfiddle.net/hEtTg/2/

强制关闭

// flag to check on that events doesn't bind twice
var isNavigationEventsEnable = false;

// enable events
var enableNavigationEvents = function () {
    $(".navigation > ul > li > a").on('click.screen-lt-980', function (e, data) {
        data = (typeof data == 'undefined') ? {} : data;
        if ($(this).next("ul").is(":visible") || data.forceClose) {
            $(this).next("ul").slideUp(400);
        } else {
            $(".navigation > ul > li > ul").slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $(".navigation > ul > li > ul > li > a").on('click.screen-lt-980', function (e, data) {
        data = (typeof data == 'undefined') ? {} : data;
        if ($(this).next("ul").is(":visible") || data.forceClose) {
            $(this).next("ul").slideUp(400);
        } else {
            $(".navigation > ul > li > ul > li > ul").slideUp(400);
            $(this).next("ul").slideToggle(400);
        }
    });
    $(".menu-link").on('click.screen-lt-980', function (e, data) {
        data = (typeof data == 'undefined') ? {} : data;
        if ($(this).next("div").is(":visible") || data.forceClose) {
            $(this).next("div").slideUp(400);
        } else {
            $(".navigation").slideUp(400);
            $(this).next("div").slideToggle(400);
        }
    });
}

// disable events
var disableNavigatioEvents = function () {
    $(".navigation > ul > li > a").trigger('click', [{
        forceClose: true
    }]);
    $(".navigation > ul > li > ul > li > a").trigger('click', [{
        forceClose: true
    }]);
    $(".menu-link").trigger('click', [{
        forceClose: true
    }]);

    $(".navigation > ul > li > a").off('click.screen-lt-980');
    $(".navigation > ul > li > ul > li > a").off('click.screen-lt-980');
    $(".menu-link").off('click.screen-lt-980');
}

// call this method on window resize
var redesignScreen = function () {
    // function (e) { // comment this line
    var width = $(window).width();
    if ((width < 980)) {
        if (!isNavigationEventsEnable) {
            isNavigationEventsEnable = true;
            enableNavigationEvents();
        }
    } else {
        isNavigationEventsEnable = false;
        disableNavigatioEvents();
    }
    //  } // comment this line
}

$(document).ready(function () {
    // attach onresize function
    window.onresize = redesignScreen;

    // calling redesignScreen initially
    redesignScreen();
});

JSFiddle:http://jsfiddle.net/hEtTg/3/

希望有帮助。