實施畫布導航移動版與桌面版

Question

背景：我正在嘗試實施一個響應式導航系統–一種用於移動設備的畫布導航，該導航會更改為導航中的幻燈片，以實現更廣泛的設備環境（區別很小但很重要-在較大的屏幕上，導航與內容重疊，而對於移動設備而言它會將內容推到一邊）。

我遵循了有關畫布外導航的非常有用的指南 。 我的問題是，對於較大的設備環境（例如台式機），我的nav-close-btn需要雙擊才能關閉，有時甚至需要三次單擊（不應該-只需單擊一下即可在手機上正常運行）。 我正在使用媒體查詢來觸發導航更改（並且我所有的轉換都在CSS中創建），但是javascript中的某些內容導致大屏幕導航出現問題。

我的基本HTML：

<div id="outer-wrap">  //Used for off-canvas nav on mobile
  <div id="inner-wrap"> //Used for off-canvas nav on mobile
    <header id="top">
      <a class="menu-toggle-primary" id="nav-open-btn" name="top-page" href="#menu">Go to Menu</a> //I use :target as the base before enhancing up to off-canvas
    </header>

    <section class="side-bar"></section>
    <section class="main-content"> </section>


    <section id="menu">
      <nav>
        <div class="block">
          <ul>
            <li></li>
          </ul>
        </div>
      </nav>
      <a class="menu-toggle-secondary" id="nav-close-btn" href="#top">Back to Content</a>
    </section>

   </div>
</div>

在嘗試理解這一點時，我正在使用本教程中的David Bushnell的javascript：

/*!
     *
     *  Copyright (c) David Bushell | http://dbushell.com/
     *
     */
    (function(window, document, undefined)
    {

        // helper functions

        var trim = function(str)
        {
            return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,'');
        };

        var hasClass = function(el, cn)
        {
            return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
        };

        var addClass = function(el, cn)
        {
            if (!hasClass(el, cn)) {
                el.className = (el.className === '') ? cn : el.className + ' ' + cn;
            }
        };

        var removeClass = function(el, cn)
        {
            el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
        };

        var hasParent = function(el, id)
        {
            if (el) {
                do {
                    if (el.id === id) {
                        return true;
                    }
                    if (el.nodeType === 9) {
                        break;
                    }
                }
                while((el = el.parentNode));
            }
            return false;
        };

        // normalize vendor prefixes

        var doc = document.documentElement;

        var transform_prop = window.Modernizr.prefixed('transform'),
            transition_prop = window.Modernizr.prefixed('transition'),
            transition_end = (function() {
                var props = {
                    'WebkitTransition' : 'webkitTransitionEnd',
                    'MozTransition'    : 'transitionend',
                    'OTransition'      : 'oTransitionEnd otransitionend',
                    'msTransition'     : 'MSTransitionEnd',
                    'transition'       : 'transitionend'
                };
                return props.hasOwnProperty(transition_prop) ? props[transition_prop] : false;
            })();

        window.App = (function()
        {

            var _init = false, app = { };

            var inner = document.getElementById('inner-wrap'),

                nav_open = false,

                nav_class = 'js-nav';


            app.init = function()
            {
                if (_init) {
                    return;
                }
                _init = true;

                var closeNavEnd = function(e)
                {
                    if (e && e.target === inner) {
                        document.removeEventListener(transition_end, closeNavEnd, false);
                    }
                    nav_open = false;
                };

                app.closeNav =function()
                {
                    if (nav_open) {
                        // close navigation after transition or immediately
                        var duration = (transition_end && transition_prop) ? parseFloat(window.getComputedStyle(inner, '')[transition_prop + 'Duration']) : 0;
                        if (duration > 0) {
                            document.addEventListener(transition_end, closeNavEnd, false);
                        } else {
                            closeNavEnd(null);
                        }
                    }
                    removeClass(doc, nav_class);
                };

                app.openNav = function()
                {
                    if (nav_open) {
                        return;
                    }
                    addClass(doc, nav_class);
                    nav_open = true;
                };

                app.toggleNav = function(e)
                {
                    if (nav_open && hasClass(doc, nav_class)) {
                        app.closeNav();
                    } else {
                        app.openNav();
                    }
                    if (e) {
                        e.preventDefault();
                    }
                };

                // open nav with main "nav" button
                document.getElementById('nav-open-btn').addEventListener('click', app.toggleNav, false);

                // close nav with main "close" button
                document.getElementById('nav-close-btn').addEventListener('click', app.toggleNav, false);

                // close nav by touching the partial off-screen content
                document.addEventListener('click', function(e)
                {
                    if (nav_open && !hasParent(e.target, 'menu')) {
                        e.preventDefault();
                        app.closeNav();
                    }
                },
                true);

                addClass(doc, 'js-ready');

            };

            return app;

        })();

        if (window.addEventListener) {
            window.addEventListener('DOMContentLoaded', window.App.init, false);
        }

    })(window, window.document);

奇怪的是，我第一次打開菜單（針對桌面大小）時，它的運行情況非常好，但是在沒有頁面（重新）加載的任何第二次嘗試中，都會發生點擊問題。 也許這個問題與刪除和添加錨點有關（就像我在逐步增強到畫布之前使用：target一樣）？

另一個問題是，在畫布之外的實現中，初始動畫是隱藏的，對於較大的設備，我會看到初始的“隱藏”動畫。

Answer 1

我自己剛遇到這個問題，在DOM准備就緒之前就對變量inner進行了解析，因此，如果您在頭文件中包含main.js，它將無法正常工作。 也記錄在這里： https : //github.com/dbushell/Responsive-Off-Canvas-Menu/issues/12