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的屏幕尺寸下触发并禁用该数字。

作为一个额外的googly，我需要确保当页面大小超过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/

WITH FORCE CLOSE

// 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/

希望有所帮助。

禁用窗口大小的jQuery函数

1 个答案: