Jquery 响应移动导航到常规导航

Question

我有一个小的导航问题，我的代码似乎无法解决。

我正在一个草稿网站上工作，我正在做一个响应式设计，当它的宽度为 880 像素时，它使我的导航成为一个滑动侧边菜单

这个问题实际上我不必担心，但它可能会被客户看到，那会很糟糕。

当我将网络浏览器调整为移动尺寸并打开侧边菜单，关闭它，然后调整为桌面尺寸时，由于我的“transform: translatex(135px)”，我的导航栏向右移动了大约 135 像素

但是当我打开幻灯片导航时(转换:translateX(opx) 它显然处于正确的位置。

这是 slider 编码

    //mobile menu toggle
        var toggle = "closed";

        var mobileNavOpen = function () {

            $('.navi').css({ "transform " : "translate(0px, 0px)",
                        "-webkit-transform" : "translate(0px, 0px)",
                        "-moz-transform" : "translate(0px, 0px)",
                        "-o-transform" : "translate(0px, 0px)",
                        "-ms-transform" : "translate(0px, 0px)"

        });

            toggle = "open";

        };

        var mobileNavClose = function () {

            $('.navi').css({ "transform " : "translate(135px, 0px)",
                        "-webkit-transform" : "translate(135px, 0px)",
                        "-moz-transform" : "translate(135px, 0px)",
                        "-o-transform" : "translate(135px, 0px)",
                        "-ms-transform" : "translate(135px, 0px)"

        });

        toggle = "closed";

        };


        $('#nav_wrap').click( function () {

            if ( toggle == "closed" ) {

            mobileNavOpen();

            }
        else {

        mobileNavClose();

        }

        });

这是我修复它的尝试。由于某种原因不起作用。我想做的是，如果我的幻灯片关闭并且我回到常规桌面宽度，它会打开(翻译:0px)如果我回到移动模式它会识别它已经在宽桌面上现在 slider 应该关闭，所以当你回去时它不会打开。

var fromWide = true;
        $(window).on("resize", function () {
            if (toggle == "closed" && $(window).width > 863 ) {
                mobileNavOpen();
                fromWide = true;
            }
            else if (fromWide == true && $(window).width < 863 ) {
                mobileNavClose();
                fromWide = false;
            }

        });

这是该站点的演示，我们将不胜感激!

Demo

Answer 1

我的建议是，不要向元素添加删除 CSS 规则，而是切换 open 类。这个类有一个 CSS 规则，它在媒体查询中以它为目标，它在每个大小上都按照你想要的方式运行。最后，如果您进入“宽屏”模式并删除 open 类，则可以检查窗口大小调整。

例如:

代替:

JQuery

$('#nav_wrap').click( function () {
    $('.navi').toggleClass("open");
});

$(window).on("resize", function () {
    if ($(window).width > 880 ) { 
        $('.navi').removeClass("open");
    }
});

CSS

@media (max-width: 880px) {
    .navi.open {
        transform: translate(135px, 0px);
        -webkit-transform: translate(135px, 0px);
        -moz-transform: translate(135px, 0px);
        -o-transform: translate(135px, 0px);
        -ms-transform: translate(135px, 0px);
    }
}