Jquery 具有切换功能的响应式导航菜单

我现在正在马德里为大师完成我的网络项目，我很难完成

您可以在此网站上查看傻瓜代码：

切换的代码为：

//Navigation Toggle
    function navToggle() {
        if(open){
            if ($(window).width() <= 1024) {
                $("#navigation-panel").animate({width: "toggle"}, 500)
                $("#photos").animate({"margin-left":"310px"}, 500);
                open= false;
            }
            else if ($(window).width() > 1024) {
                $("#navigation-panel").animate({width: "toggle"}, 500)
                $("#photos").animate({"margin-left":"410px"}, 500);
                open= false;
            }
        }
        else {
            $("#navigation-panel").animate({width: "toggle"}, 500)
            $("#photos").animate({"margin-left":"10px"}, 500)
            open= true;
        }
    }

//导航切换
函数navToggle（）{
如果（打开）{
如果（$（窗口）.width（）1024）{
$（“#导航面板”）.animate（{width:“toggle”}，500）
$（“#照片”）.animate（{“左边距”：“410px”}，500）；
开=假；
}
}
否则{
$（“#导航面板”）.animate（{width:“toggle”}，500）
$（“#照片”）.animate（{“左边距”：“10px”}，500）
开放=真实；
}
}

我的主要问题是，一旦导航一开始就打开了，一切都很好，但是一旦在1024以下调整窗口的大小或者在图像墙周围调整窗口的大小，它就不会考虑为1024以下或1024以上的分辨率指定的不同边距

我希望你能帮助我，我会非常感激：）

编辑：

我试过这个，但也不管用：

$(window).resize(autoResize);

    //Auto Resize
    function autoResize() {
        if ($("#navigation-panel").is(":visible")) {
            if ($(window).width() <= 1024) {
                $("#photos").animate({"margin-left":"310px"}, 500);
            }
            else if ($("#navigation-panel").is(":visible")) {
                if ($(window).width() > 1024) {
                    $("#photos").animate({"margin-left":"410px"}, 500);
                }
            }
        }
    }

$（窗口）。调整大小（自动调整大小）；
//自动调整大小
函数自动调整大小（）{
如果（$（“#导航面板”）。是（“：可见”））{
如果（$（窗口）.width（）1024）{
$（“#照片”）.animate（{“左边距”：“410px”}，500）；
}
}
}
}

感谢Easwee:）必须修复它添加以下内容：

$(window).resize(autoResize);

    //Auto Resize
    function autoResize() {
        if ($("#navigation-panel").is(":visible")) {
            if ($(window).width() <= 1024) {
                $("#photos").css({"margin-left":"310px"});
            }
            else if ($("#navigation-panel").is(":visible")) {
                if ($(window).width() > 1024) {
                    $("#photos").css({"margin-left":"410px"});
                }
            }
        }
    }

$（窗口）。调整大小（自动调整大小）；
//自动调整大小
函数自动调整大小（）{
如果（$（“#导航面板”）。是（“：可见”））{
如果（$（窗口）.width（）1024）{
$（“#照片”）.css（{“左边距”：“410px”}）；
}
}
}
}

致以最良好的祝愿，

---

Joel

您还需要在调整窗口大小时触发

navToggle（）

功能

---

既然我看到您使用jquery，请看一看

我不太明白如何使用它，还有什么建议吗？：）