背景：我正在尝试实现一个响应式导航系统 - 一种适用于移动设备的画布外导航，它会更改为导航中的幻灯片以适应更广泛的设备上下文（差异是微妙但重要的 - 在更大的屏幕上，导航与内容重叠，而对于移动它将内容推到一边）。
我遵循了关于画布外导航的非常有用的指南。我的问题是，对于较大的设备上下文（例如桌面），我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，然后逐步增强到画布外）？
另一个问题是，在画布外的实现中，初始动画被隐藏了，对于较大的设备，我看到了初始的“隐藏”动画。