我已经继承了一个试图实现OffCanvas导航的网站。
它具有所有断点的下拉效果，但是当您在移动设备中时，子导航会滑入。但是，关闭按钮不起作用。
// Avoid console errors in browsers that don't support console.log()
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
// Off Canvas Setup - find classes
function offCanvasSetup() {
var $container = $('.offCanvas');
var $link = $('.offCanvasLink');
// Active menu on link click/tap
$link.click(function(event){
event.preventDefault();
$t = $(this);
var $target = $t.attr('href');
offCanvasShow($target);
});
}
// Show menu and set up scroll
function offCanvasShow(targetElement) {
var targetScroller = $(targetElement).find('.scroller');
// Add Close button and close on click
targetScroller.prepend('<div class="close">Close</div>');
targetScroller.find('.close').click(function(){
offCanvasHide(targetElement);
});
// Add classes
$(targetElement).addClass('active');
targetScroller.addClass('active');
$('body').addClass('lockScreen');
// Add iscroll
var scroll = new IScroll(targetElement, {
disableMouse: true
// tap: true
});
// TBA - Custom tap event for Android
}
// Hide off Canvas menu and destroy scroll
function offCanvasHide(targetElement) {
$(targetElement).removeClass('active');
$('body').removeClass('lockScreen');
// Destroy active scroll
scroll.destroy();
scroll = null;
}
// ------------------------------
// TEMP NAV STUFF - Refactor using above functions
// ------------------------------
// Responsive nav
function offCanvasShowNav(targetElement) {
var target = targetElement;
target.addClass('active offCanvasActive');
}
function offCanvasHideNav() {
var target = $('.offCanvasActive');
target.removeClass('active offCanvasActive');
}
function offCanvasNavSetup() {
var target = $('.nav-collapse .parent > li');
var child = $('.child');
// Close subnav via button, if available
child.find('.close').click(function(event){
event.preventDefault();
offCanvasHide();
});
// Set iScroll on each subnav div if needed
if ( $(window).width() < '768' ) {
$('.scroller').addClass('active');
var i = 0;
child.each(function(i){
myScrolli = new IScroll(this);
var myScrolli = new IScroll(this, {
disableMouse: true,
tap: true
});
i++;
});
// Custom tap event - hack for Chrome android
$('.scroller').on('click, tap', 'a', function(event) {
var t = $(this);
if ( t.hasClass('close')) {
// alert('close!');
offCanvasHideNav();
}
else {
//alert('page link!');
getUrl = t.attr('href');
window.location.href = getUrl;
}
});
}
// Move subnav into position
target.click(function(event){
event.preventDefault();
// alert('PARENT');
t = $(this);
child = t.find('.child');
offCanvasShowNav(child);
});
// Ensure the main nav clicks don't register on subnav
child.click(function(event) {
event.stopPropagation();
//alert('test child');
});
}
// ------------------------------
// END TEMP NAV STUFF
// ------------------------------
// jQuery namespace
(function($) {
// Fastclick - IE8+ only
if (document.addEventListener) {
FastClick.attach(document.body);
}
// jQuery (ready)
$(document).ready(function() {
var nav = responsiveNav(".nav-collapse", { // Selector
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 250, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "before", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked
openPos: "relative", // String: Position of the opened nav, relative or static
navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active
jsClass: "js", // String: 'JS enabled' class which is added to <html> element
init: function(){}, // Function: Init callback
open: function(){
$('body').addClass('lockScreen');
}, // Function: Open callback
close: function(){
$('body').removeClass('lockScreen');
offCanvasHideNav();
} // Function: Close callback
});
offCanvasSetup();
offCanvasNavSetup(); // TEMP
});
})(jQuery);
当我尝试单击关闭按钮时，我也收到此错误：
未捕获的TypeError：undefined不是函数
我的标记是：
<header id="siteHeader" role="banner">
<div class="inner">
<h1><a href="index.html" class="icon-uniform-logo">Uniform</a></h1>
<a href="#" class="nav-toggle" aria-hidden="false">Menu</a><nav class="nav nav-collapse nav-collapse nav-collapse-0 closed" role="navigation" aria-hidden="true" style="-webkit-transition: max-height 250ms; transition: max-height 250ms; position: absolute;">
<ul class="parent">
<li>
<a href="#">Career</a>
<div class="child">
<div class="scroller active" style="-webkit-transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transform: translate(0px, 0px) translateZ(0px);">
<h1>Career</h1>
<ul>
<li><a href="page.html">career child link 1</a></li>
<li><a href="page.html">child link 2</a></li>
<li><a href="page.html">child link 3</a></li>
<li><a href="page.html">child link 4</a></li>
<li><a href="page.html">child link 5</a></li>
<li><a href="page.html">child link 6</a></li>
<li><a href="page.html">child link 7</a></li>
<li><a href="page.html">child link 8</a></li>
<li><a href="page.html">child link 9</a></li>
<li><a href="page.html">child link 10</a></li>
<li><a href="page.html">child link 11</a></li>
<li><a href="page.html">child link 12</a></li>
<li><a href="page.html">child link 13</a></li>
<li><a href="page.html">child link 14</a></li>
<li><a href="page.html">child link 15</a></li>
<li><a href="page.html">child link 16</a></li>
<li><a href="page.html">child link 17</a></li>
<li><a href="page.html">child link 18</a></li>
<li><a href="page.html">child link 19</a></li>
<li><a href="page.html">child link 20</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Corporate</a>
<div class="child">
<div class="scroller active" style="-webkit-transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transform: translate(0px, 0px) translateZ(0px);">
<div><a href="#" class="close">Close</a></div>
<h1>Corporate</h1>
<ul>
<li><a href="page.html">corporate child link 1</a></li>
<li><a href="page.html">child link 2</a></li>
<li><a href="page.html">child link 3</a></li>
<li><a href="page.html">child link 4</a></li>
<li><a href="page.html">child link 5</a></li>
<li><a href="page.html">child link 6</a></li>
<li><a href="page.html">child link 7</a></li>
<li><a href="page.html">child link 8</a></li>
<li><a href="page.html">child link 9</a></li>
<li><a href="page.html">child link 10</a></li>
<li><a href="page.html">child link 11</a></li>
<li><a href="page.html">child link 12</a></li>
<li><a href="page.html">child link 13</a></li>
<li><a href="page.html">child link 14</a></li>
<li><a href="page.html">child link 15</a></li>
<li><a href="page.html">child link 16</a></li>
<li><a href="page.html">child link 17</a></li>
<li><a href="page.html">child link 18</a></li>
<li><a href="page.html">child link 19</a></li>
<li><a href="page.html">child link 20</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Work</a>
<div class="child">
<div class="scroller active" style="-webkit-transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transform: translate(0px, 0px) translateZ(0px);">
<div><a href="#" class="close">Close</a></div>
<h1>Work</h1>
<ul>
<li><a href="page.html">work child link 1</a></li>
<li><a href="page.html">child link 2</a></li>
<li><a href="page.html">child link 3</a></li>
<li><a href="page.html">child link 4</a></li>
<li><a href="page.html">child link 5</a></li>
<li><a href="page.html">child link 6</a></li>
<li><a href="page.html">child link 7</a></li>
<li><a href="page.html">child link 8</a></li>
<li><a href="page.html">child link 9</a></li>
<li><a href="page.html">child link 10</a></li>
<li><a href="page.html">child link 11</a></li>
<li><a href="page.html">child link 12</a></li>
<li><a href="page.html">child link 13</a></li>
<li><a href="page.html">child link 14</a></li>
<li><a href="page.html">child link 15</a></li>
<li><a href="page.html">child link 16</a></li>
<li><a href="page.html">child link 17</a></li>
<li><a href="page.html">child link 18</a></li>
<li><a href="page.html">child link 19</a></li>
<li><a href="page.html">child link 20</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Culture</a>
<div class="child">
<div class="scroller active" style="-webkit-transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transform: translate(0px, 0px) translateZ(0px);">
<div><a href="#" class="close">Close</a></div>
<h1>Culture</h1>
<ul>
<li><a href="page.html">culture child link 1</a></li>
<li><a href="page.html">child link 2</a></li>
<li><a href="page.html">child link 3</a></li>
<li><a href="page.html">child link 4</a></li>
<li><a href="page.html">child link 5</a></li>
<li><a href="page.html">child link 6</a></li>
<li><a href="page.html">child link 7</a></li>
<li><a href="page.html">child link 8</a></li>
<li><a href="page.html">child link 9</a></li>
<li><a href="page.html">child link 10</a></li>
<li><a href="page.html">child link 11</a></li>
<li><a href="page.html">child link 12</a></li>
<li><a href="page.html">child link 13</a></li>
<li><a href="page.html">child link 14</a></li>
<li><a href="page.html">child link 15</a></li>
<li><a href="page.html">child link 16</a></li>
<li><a href="page.html">child link 17</a></li>
<li><a href="page.html">child link 18</a></li>
<li><a href="page.html">child link 19</a></li>
<li><a href="page.html">child link 20</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<form class="standard search">
<input type="text" name="#" id="#" placeholder="Search" autocomplete="on" value="">
</form>
</div>
</header>
任何想法？