Javascript 离开画布不工作_Javascript_Jquery

Javascript 离开画布不工作

javascript jquery

Javascript 离开画布不工作,javascript,jquery,Javascript,Jquery,我继承了一个站点，该站点试图为其导航实现OffCanvas 它对所有断点都有下拉效果，但当您在移动设备中时，子导航将滑入。但是，“关闭”按钮不起作用 // Avoid console errors in browsers that don't support console.log() (function() { var method; var noop = function () {}; var methods = [ 'assert', 'clear'

我继承了一个站点，该站点试图为其导航实现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);

//在不支持console.log（）的浏览器中避免控制台错误
（功能（）{
var方法；
var noop=函数（）{}；
var方法=[
'断言'，'清除'，'计数'，'调试'，'目录'，'目录XML'，'错误'，
“异常”、“组”、“组折叠”、“组结束”、“信息”、“日志”，
“markTimeline”、“profile”、“profileEnd”、“table”、“time”、“timeEnd”，
“时间戳”、“跟踪”、“警告”
];
var length=methods.length；
var console=（window.console=window.console | |{}）；
while（长度--）{
方法=方法[长度]；
//只有未定义的存根方法。
如果（！控制台[方法]）{
控制台[方法]=noop；
}
}
}());
//非画布设置-查找类
函数offCanvasSetup（）{
var$container=$（'.offCanvas'）；
变量$link=$（'.offCanvasLink'）；
//链接上的活动菜单单击/点击
$link.click（函数（事件）{
event.preventDefault（）；
$t=$（此项）；
var$target=$t.attr（'href'）；
非画布展览（目标美元）；
});
}
//显示菜单和设置滚动条
画布显示功能（targetElement）{
var targetScroller=$（targetElement）.find（'.scroller'）；
//添加关闭按钮并单击关闭
targetScroller.prepend（'Close'）；
targetScroller.find（'.close'）。单击（函数（）{
offCanvasHide（targetElement）；
});
//添加类
$（targetElement）.addClass（'active'）；
targetScroller.addClass（'active'）；
$（'body'）.addClass（'lockScreen'）；
//添加iscroll
var scroll=新IScroll（targetElement{
残废之家：真的吗
//塔普：没错
});
//TBA-Android自定义点击事件
}
//隐藏画布外菜单并销毁滚动
画布隐藏功能（targetElement）{
$（targetElement）.removeClass（'active'）；
$（'body'）.removeClass（'lockScreen'）；
//销毁活动卷轴
scroll.destroy（）；
滚动=空；
}
// ------------------------------
//TEMP NAV STUFF-使用上述函数重构
// ------------------------------
//响应导航
CanvasShowNav功能（targetElement）{
var目标=目标元素；
target.addClass（'activeoffcanvasactive'）；
}
canvashidenav（）的功能{
var目标=$（'offCanvasActive'）；
target.removeClass（“活动关闭画布活动”）；
}
函数offCanvasNavSetup（）{
var target=$（'.nav collapse.parent>li'）；
var child=$（'.child'）；
//如果可用，通过按钮关闭subnav
查找（'.close'）。单击（函数（事件）{
event.preventDefault（）；
offCanvasHide（）；
});
//如果需要，在每个子AV div上设置iScroll
如果（$（窗口）.width（）<'768'）{
$（'.scroller'）.addClass（'active'）；
var i=0；
各子功能（一）{
myScrolli=新的IScroll（本）；
var myScrolli=新的IScroll（本{
残废之家：没错，
塔普：没错
});
i++；
});
//定制点击事件-Chrome android黑客攻击
$（'.scroller'）。on（'单击，轻触，'a'，函数（事件）{
var t=$（本）；
如果（t.hasClass（'close'））{
//警报（‘关闭’）；
offCanvasHideNav（）；
}
否则{
//警报（'页面链接！'）；
getUrl=t.attr（'href'）；
window.location.href=getUrl；
}
});
}
//将SUNBNAV移动到位
目标。单击（函数（事件）{
event.preventDefault（）；
//警报（“父级”）；
t=$（本）；
child=t.find（'.child'）；
offCanvasShowNav（儿童）；
});
//确保主导航点击未在subnav上注册
单击（函数（事件）{
event.stopPropagation（）；
//警报（“测试子项”）；
});
}
// ------------------------------
//终端温度导航设备
// ------------------------------
//jQuery命名空间
（函数（$）{
//Fastclick-仅限IE8+
if（文件增补列表器）{
FastClick.attach（document.body）；
}
//jQuery（就绪）
$（文档）.ready（函数（）{
var nav=responsiveNav（“.nav collapse”，{//Selector
动画：true，//布尔值：使用CSS3变换，true或false
转换：250，//整数：转换的速度，以毫秒为单位
标签：“菜单”，//字符串：导航切换的标签
插入：“before”，//字符串：在导航之前或之后插入切换
customToggle:，//选择器：指定自定义切换的ID
closeOnNavClick:false，//布尔值：单击其中一个链接时关闭导航
openPos：“相对的”//字符串：打开的导航的位置，相对的或静态的
navClass:“nav collapse”，//字符串：默认CSS类。如果更改，您也需要编辑CSS！
navActiveClass:“js nav active”，//字符串：当nav处于活动状态时添加到元素的类
jsClass:“js”//String:“js enabled”类，添加到元素中
init:function（）{}，//function:init回调
打开：函数（）{
$（'body'）.addClass（'lockScreen'）；
}，//函数：打开回调
关闭：函数（）{
$（'body'）.removeClass（'lockScreen'）；
offCanvasHideNav（）；
}//函数：关闭回调
});
offCanvasSetup（）；
offCanvasNavSetup（）；//临时
});
})（jQuery）；

当我尝试并单击“关闭”按钮时，也会出现此错误：

未捕获类型错误：未定义不是函数
我的标记是：

<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>

事业