背景：我正在尝试实现一个响应式导航系统——一种用于移动设备的画布外导航，在更广泛的设备上下文中更改为导航中的幻灯片（差异很微妙但很重要 - 在更大的屏幕上，导航与内容重叠，而对于移动设备，它将内容推到一边）。
我遵循了有关画布外导航的非常有用的指南。我的问题是，对于较大的设备上下文（例如桌面），我的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，然后逐渐增强到画布外）？
另一个问题是，在画布外实现上，初始动画是隐藏的，对于较大的设备，我看到初始"隐藏"动画。
我自己刚刚遇到过这个问题，变量内部在 DOM 准备好之前就被解析了，所以如果你在标题中包含 main.js，它将无法工作。此处还记录了：https://github.com/dbushell/Responsive-Off-Canvas-Menu/issues/12