在 jQuery 中动态检测窗口宽度

Question

我正在使用一个模板，它带有一个 jQuery 函数来检测窗口宽度，但它仅在您打开窗口或刷新页面时才有效，而不是在您调整窗口宽度时。根据 IU 阅读的内容，我需要将调整大小功能集成到我的代码库中

$(window).resize(function()

但由于我的 jQuery 是有限的，我不知道如何把它放在这个脚本中

var ww = $(window).width();

/* Menu */
$(document).ready(function() {
"use strict";
$('body').find("#mainmenu li a").each(function() {
    if ($(this).next().length > 0) {
        $(this).addClass("parent");
    }
});

$('body').find(".toggleMenu").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
    $('body').find("#mainmenu").toggle();
});
adjustMenu();
});


 $(window).load(function () {
 $('body').find("#mainmenu").css('pointer-events', 'auto');
 });

var adjustMenu = function() {
"use strict";
if (ww < 900) {
    $('body').find(".toggleMenu").css("display", "inline-block");
    if (!$('body').find(".toggleMenu").hasClass("active")) {
        $('body').find("#mainmenu").hide();
    } else {
        $('body').find("#mainmenu").show();
    }
    $('body').find("#mainmenu li").unbind('mouseenter mouseleave');
    $('body').find("#mainmenu li a.parent").unbind('click').bind('click',  function(e) {
        e.preventDefault();
        $(this).parent("li").toggleClass("hover");
    });
} 
else if (ww >= 900) {
    $('body').find(".toggleMenu").css("display", "none");
    $('body').find("#mainmenu").show();
    $('body').find("#mainmenu li").removeClass("hover");
    $('body').find("#mainmenu li a").unbind('click');
    $('body').find("#mainmenu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
    $(this).toggleClass('hover');
    $(this).toggleClass('activelink');
    $(this).find("ul").toggleClass('animatedfast');
    $(this).find("ul").toggleClass('fadeInUp');
    });
    $('body').find("#mainmenu ul li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
        $(this).toggleClass('hover');
        $(this).find("ul li").toggleClass('animatedfast');
        $(this).find("ul li").toggleClass('fadeInLeft');
    });
  }
    };

我可以看到该逻辑发生在 adjustMenu 函数中，那么我会将其包装在 resize 函数中吗？

Answer 1

也许我遗漏了一些明显的东西，但为什么不把整个事情从

$(document).ready ()

把它放在一个函数中

Function  doAllOfThis (
//do everything
);

然后在文档就绪时调用它？

$(document).ready(function ({
    doAllOfThis();
});
$(widow).resize (function ({
    doAllOfThis();
});

我看不出有什么问题。 但是您可以使用“if ww =”条件提取代码并将其移动到函数中，然后对函数执行上述操作。

更好的解决方案

刚注意到

adjustMenu();

功能已经为你设置好了，所以添加

$(window).resize(function({
    var ww = $(window).width();
    adjustMenu();
});

Answer 2

利用resize事件。

$(window).resize(function() {
    var ww = $(window).width(); // will contain width after resize

    // your adjust logic here
});