在jQuery中动态检测窗口宽度答案

【问题标题】：Detect window width on the fly in jQuery在jQuery中动态检测窗口宽度
【发布时间】：2014-05-08 15:23:46
【问题描述】：

我正在使用一个模板，它带有一个 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 函数中？

【问题讨论】：

标签： javascript jquery

【解决方案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();
});

【讨论】：

【解决方案2】：

利用resize 事件。

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

    // your adjust logic here
});

【讨论】：