Question

欢迎

侧面导航菜单按钮。如果单击.menubutton则显示菜单，如果单击.nav_menu_phone_size则将隐藏菜单并将导航宽度更改为0。这很好，但是问题是当您将其尺寸调整回“显示器尺寸”或“ x> 751px”，则.nav_menu的宽度仍然为0，而不是重置为原始CSS。

TLDL：如果浏览器改回宽度> 751px（不刷新浏览器），我希望.nav_menu的大小重新调整为100％宽度。

如所示（jQuery）：

$(document).ready(function() {
    $('.menubutton').click(function() {
        $(".nav_menu").animate({ width: "21.04rem" }, 500 );
        $(".nav_menu_phone_side").delay(500).fadeIn();
    });
});

$(document).ready(function() {
    $('.nav_menu_phone_side').click(function() {
        $(".nav_menu").animate({ width: "0" }, 500 );
        $(".nav_menu_phone_side").delay(500).fadeOut();
    });
});

我确实有像这样的原始方法，但是我更喜欢通过jquery（CSS）来做到这一点：

@media all and (max-width: 5000px) and (min-width: 751px) {
    .nav_menu {
        width: 100% !important;
    }
}

Answer 1

您可以通过此功能完成

$(window).resize(function(){
    var winwid = $(window).width();
    if(winwid >= 751){
        /*Your code for element width*/
    }
});

RWD侧面导航将宽度从移动设备转移到监控jQuery

1 个答案: