Question

我正在使用一个模板，它带有一个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');
    });
  }
    };

有人可以帮忙吗？我可以看到逻辑发生在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
});

快速检测窗口宽度jQuery

2 个答案: