Javascript 实现非画布导航移动与桌面

背景：我正在尝试实现一个响应性导航系统——一个用于移动设备的非画布导航系统，它变为用于更广泛设备环境的导航幻灯片（区别很微妙但很重要——在更大的屏幕上，导航与内容重叠，而对于移动设备，导航将内容推到一边）

我已经学习了非常有用的关于非画布导航的知识。我的问题是，对于较大的设备环境（例如桌面），我的

导航关闭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>

这很奇怪，我第一次打开菜单（对于桌面大小）时，它工作得非常好，但是在没有页面（重新）加载的任何第二次尝试中，都会出现单击问题。也许问题与移除和添加锚有关（正如我使用的：target，在逐步增强到非画布之前）

---

另一个问题是，在非画布实现中，初始动画是隐藏的，对于较大的设备，我看到了初始的“隐藏”动画。

我自己刚刚遇到这个问题，在DOM准备就绪之前解析了变量INTERNAR，因此如果在标头中包含main.js，它将无法工作。此处还记录了：

/*!
     *
     *  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);