Question

我正在尝试为我现在在马德里做的主人完成我的网络项目，我很难完成这个。

您可以查看本网站上的傻瓜代码：

http://cice.digitalcore.es/febrero/majestic/

切换的代码是：

//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;
        }
    }

我的主要问题是，一旦导航打开，一切都很好，但是一旦在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);
                }
            }
        }
    }

感谢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"});
                }
            }
        }
    }

最好的问候，乔尔

Answer 1

您还需要在窗口调整大小时触发navToggle()功能。

因为我看到你使用jquery看看http://api.jquery.com/resize/

带切换功能的响应式导航菜单

1 个答案: