Question

我的代码似乎没有解决的小导航问题。

我正在制作一个临时制作的网站，我正在制作一个响应式设计，当我的880px宽时，我的导航进入滑动侧面菜单

问题是我实际上不必担心的问题，但客户可能会看到它并且那可能会很糟糕。

当我将我的网络浏览器调整为手机大小并打开侧面菜单时，关闭它，然后调整到桌面大小我的导航大约135px到右边由于我的＆＃34;变换：translatex（135px）＆＃ 34;

但是当我让我的幻灯片导航打开时（转换：translateX（opx）它显然在正确的位置。

这是滑块编码

    //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），如果我回到移动模式，它会识别它已经在宽桌面上，现在是滑块应关闭，以便在您返回时不会打开。

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

        });

这是该网站的演示，任何帮助将不胜感激！

picture of problem

Demo

Answer 1

我的建议是，您可以切换open课程，而不是添加删除CSS规则给您的元素。此类具有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);
    }
}

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

1 个答案: