Question

我正在尝试在网站上使用此菜单移动设备。 http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/comment-page-8/#comment-466199

我有它工作，但一个ie11用户报告错误，我在控制台中看到以下错误未捕获的TypeError：无法读取nullmlPushMenu._init @ mlpushmenu.js的属性'querySelectorAll'：89mlPushMenu @ mlpushmenu.js：67（匿名函数）@（索引）：1062

以下是有问题的js文件的片段

class Apples { 

//////Main Method
    public static void main (String[] args) { 

    if (Apples.getGender() == "boy" && Apples.getAge() > 17) { 
        System.out.printf("You can enter");
    }
    else { 
        System.out.printf("You cannot enter");
    }
}

/////Two Methods        
        public static String getGender() { 
        Scanner newGender = new Scanner(System.in);
        System.out.println("What gender are you?"); 
            String genderMF = newGender.nextLine();
            return genderMF;

        }

    public static int getAge() { 
        Scanner newAge = new Scanner(System.in);
        System.out.println("What age are you?");    
        int ageMF = newAge.nextInt();
        return ageMF;

    }
}

特定的第89行位于其中间，所以这里将它拉出来进行定位

function mlPushMenu( el, trigger, options ) {   
    this.el = el;
    this.trigger = trigger;
    this.options = extend( this.defaults, options );
    // support 3d transforms
    this.support = Modernizr.csstransforms3d;
    if( this.support ) {
        this._init();
    }
}

mlPushMenu.prototype = {
    defaults : {
        // overlap: there will be a gap between open levels
        // cover: the open levels will be on top of any previous open level
        type : 'overlap', // overlap || cover
        // space between each overlaped level
        levelSpacing : 40,
        // classname for the element (if any) that when clicked closes the current level
        backClass : 'mp-back'
    },
    _init : function() {
        // if menu is open or not
        this.open = false;
        // level depth
        this.level = 0;
        // the moving wrapper
        this.wrapper = document.getElementById( 'mp-pusher' );
        // the mp-level elements
        this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );
        // save the depth of each of these mp-level elements
        var self = this;
        this.levels.forEach( function( el, i ) { el.setAttribute( 'data-level', getLevelDepth( el, self.el.id, 'mp-level' ) ); } );
        // the menu items
        this.menuItems = Array.prototype.slice.call( this.el.querySelectorAll( 'li' ) );
        // if type == "cover" these will serve as hooks to move back to the previous level
        this.levelBack = Array.prototype.slice.call( this.el.querySelectorAll( '.' + this.options.backClass ) );
        // event type (if mobile use touch events)
        this.eventtype = mobilecheck() ? 'touchstart' : 'click';
        // add the class mp-overlap or mp-cover to the main element depending on options.type
        classie.add( this.el, 'mp-' + this.options.type );
        // initialize / bind the necessary events
        this._initEvents();
    },

然后我在我的页脚中调用了插件的实例（那就是索引行1082

该调用看起来像这样

this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );

Answer 1

您的桌面版网站没有ID为＆＃34; mp-menu 的元素。＆＃34;当您调用 getElementById 方法时，您将获得null作为回应。然后将其分配给对象的el属性。当您尝试调用 querySelectorAll 时，您尝试从空值开始执行此操作。

根据上述问题的评论， mp-menu 元素仅存在于移动网站上。如果是这种情况，此代码也应仅加载到移动设备上。

Answer 2

问题在于JS文件是在所有平台，桌面和移动平台上调用的。而使用mlPushMenu的移动菜单仅在移动设备上调用。因此只在移动设备上调用JS文件解决了桌面浏览器的问题。

uncaught typeError：无法读取属性'querySelectorAll'的null

2 个答案: