Javascript jQuery动态调整页边距2

我正在使用jQuery动态调整垂直页边距的大小，我想知道是否可以解决一个问题，该问题会导致页面加载时页边距只调整一次

    /* PAGE SIZE */
    $(document).ready(function(){
        var WIDTH = $(window).width();
        if(WIDTH > 1420){
            $("ul#menu-content-1.menu").css("margin-top","59px");
            $("div.menu-content-container").css("margin-top","59px")
        } else if(WIDTH < 1420) {
            $("ul#menu-content-1.menu").css("margin-top","-59px");
            $("div.menu-content-container").css("margin-top","-59px");
        }
    });

/*页面大小*/
$（文档）.ready（函数（）{
变量宽度=$（窗口）.WIDTH（）；
如果（宽度>1420）{
$（“ul#menu-content-1.menu”）.css（“页边距顶部”、“59px”）；
$（“div.menu-content-container”）.css（“页边距顶部”、“59px”）
}否则，如果（宽度<1420）{
$（“ul#menu-content-1.menu”）.css（“页边距顶部”，“-59px”）；
$（“div.menu-content-container”）.css（“页边空白顶部”，“-59px”）；
}
});

---

这是我现有的代码。如何解决此重复出现的问题，以便每次加载页面和调整窗口大小时，边距都会调整？

我假设您希望在某个时候触发此问题

在窗口上，可能需要调整大小：

此外，我建议对上述内容使用CSS媒体查询：

ul #menu-content-1.menu {margin-top: 59px}
div.menu-content-container {margin-top:59px}

@media (max-width: 1420) 
{ 
    ul #menu-content-1.menu {margin-top: -59px}
    div.menu-content-container {margin-top: -59px}
}

.ready（）

，

resize（）

是使用jQuery 1.7+中的

.bind（）

函数（或

.on（）

的捷径

.resize（函数（）{}）

映射到

.bind（'resize'，函数（）{}）

以下是尽可能使用

.on（）

时代码的外观：

$(document).on('ready', function() {

    $(window).on('resize', function() {

         // Stuff in here happens on ready and resize.

        var WIDTH = $(window).width();
        if(WIDTH > 1420){
            $("ul#menu-content-1.menu").css("margin-top","59px");
            $("div.menu-content-container").css("margin-top","59px")
        } else if(WIDTH < 1420) {
            $("ul#menu-content-1.menu").css("margin-top","-59px");
            $("div.menu-content-container").css("margin-top","-59px");
        }

    }).trigger('resize'); // Trigger resize handlers.       

});//ready

$（document）.on（'ready'，function（）{
$（窗口）.on（'resize'，function（））{
//这里的东西发生在准备就绪和调整大小。
变量宽度=$（窗口）.WIDTH（）；
如果（宽度>1420）{
$（“ul#menu-content-1.menu”）.css（“页边距顶部”、“59px”）；
$（“div.menu-content-container”）.css（“页边距顶部”、“59px”）
}否则，如果（宽度<1420）{
$（“ul#menu-content-1.menu”）.css（“页边距顶部”，“-59px”）；
$（“div.menu-content-container”）.css（“页边空白顶部”，“-59px”）；
}
}).trigger（'resize'）；//触发器调整大小处理程序。
});//准备好的

您可以尝试将其放入$（窗口）

$（窗口）.load（函数（）{
变量宽度=$（窗口）.WIDTH（）；
如果（宽度>1420）{
$（“ul#menu-content-1.menu”）.css（“页边距顶部”、“59px”）；
$（“div.menu-content-container”）.css（“页边距顶部”、“59px”）
}否则，如果（宽度<1420）{
$（“ul#menu-content-1.menu”）.css（“页边距顶部”，“-59px”）；
$（“div.menu-content-container”）.css（“页边空白顶部”，“-59px”）；
}
});

用一块JavaScript诊断问题有点困难。如果你建立了一个网络，也许有人能帮你。

 $(window).load(function(){
        var WIDTH = $(window).width();
        if(WIDTH > 1420){
            $("ul#menu-content-1.menu").css("margin-top","59px");
            $("div.menu-content-container").css("margin-top","59px")
        } else if(WIDTH < 1420) {
            $("ul#menu-content-1.menu").css("margin-top","-59px");
            $("div.menu-content-container").css("margin-top","-59px");
        }
    });