Javascript 在jQuery中动态检测窗口宽度

我使用的是一个模板，它附带了一个jQuery函数来检测窗口宽度，但它只在打开窗口或刷新页面时起作用，而不是在调整窗口宽度时起作用。。从我读到的内容来看，我需要将resize函数集成到我的代码库中

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

var ww=$（窗口）.width（）；
/*菜单*/
$（文档）.ready（函数（）{
“严格使用”；
$（'body'）。查找（#主菜单li a”）。每个（函数（）{
if（$（this）.next（）.length>0）{
$（此）.addClass（“父级”）；
}
});
$（'body'）。查找（“.toggleMenu”）。单击（函数（e）{
e、 预防默认值（）；
$（此）.toggleClass（“活动”）；
$（'body'）.find（“#主菜单”）.toggle（）；
});
调整菜单（）；
});
$（窗口）。加载（函数（）{
$（'body'）.find（'main menu'）.css（'pointer-events'，'auto'）；
});
var adjustMenu=功能（）{
“严格使用”；
如果（ww<900）{
$（'body'）.find（“.toggleMenu”）.css（“显示”、“内联块”）；
if（！$（'body'）.find（“.toggleMenu”）.hasClass（“活动”））{
$（'body'）.find（“#主菜单”）.hide（）；
}否则{
$（'body'）.find（“#主菜单”）.show（）；
}
$（'body'）.find（'main menu li'）.unbind（'mouseenter mouseleave'）；
$（'body'）.find（'main menu li a.parent'）.unbind（'click'）.bind（'click'，函数（e）{
e、 预防默认值（）；
$（this.parent（“li”）.toggleClass（“hover”）；
});
} 
否则如果（ww>=900）{
$（'body'）.find（“.toggleMenu”）.css（“display”，“none”）；
$（'body'）.find（“#主菜单”）.show（）；
$（'body'）.find（'main menu li'）.removeClass（“hover”）；
$（'body'）。查找（'main menu li a'）。取消绑定（'click'）；
$（'body'）.find（'main menu 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（'main menu 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功能中？

利用

resize

事件

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

    // your adjust logic here
});

---

也许我遗漏了一些明显的东西，但为什么不把整个事情都从我的记忆中抹去呢

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