Question

我正在使用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");
        }
    });

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

Answer 1

.ready()，.resize()是使用.bind()函数（或jQuery 1.7+中的.on()）的捷径。 .resize(function () {})映射到.bind('resize', function () {})。

以下是您的代码在尽可能使用.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

Answer 2

我假设你想在某个时候触发这个？

在窗口上可能调整大小：jQuery on window resize

另外，我建议使用上面的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}
}

Answer 3

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

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

jQuery动态大小的边距2

3 个答案: