web-dev-qa-db-ja.com

不明なtypeError：nullのプロパティ 'querySelectorAll'を読み取れません

このメニューをサイトのモバイル用に使用しようとしています。 http://tympanus.net/codrops/2013/08/13/multi-level-Push-menu/comment-page-8/#comment-466199

私はそれを動作させていますが、1人のIE11ユーザーがエラーを報告しており、コンソールで次のエラーが表示されていますUncaught TypeError：nullmlPushMenu._init @ mlpushmenu.js：89mlPushMenu @ mlpushmenu.js：67（anonymous function） @（インデックス）：1062

ここに問題のjsファイルのスニペットがあります

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();
    },

特定の線89はその中にあるので、ここではあなたの向きのために引き出されています

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

その後、フッターでプラグインのインスタンスを呼び出しました（インデックス行1082

その呼び出しは次のようになります

<script>
    new mlPushMenu(
        document.getElementById( 'mp-menu' ),
        document.getElementById( 'trigger' ),
        { type : 'cover' }
    );
</script>
javascriptjquerymobilenavigationinternet-explorer-11
11
Tom

デスクトップサイトには、IDが「mp-men」の要素がありません。 getElementByIdメソッドを呼び出すと、応答でnullを取得します。これは、オブジェクトのelプロパティに割り当てられます。 querySelectorAllを呼び出そうとすると、null値から呼び出そうとします。

上記の質問に対するコメントによれば、mp-men要素はモバイルサイトのみに存在します。その場合は、このコードもモバイルにのみロードにする必要があります。

12
Sampson

問題は、JSファイルがデスクトップとモバイルのすべてのプラットフォームで呼び出されていたことです。一方、mlPushMenuを使用したモバイルメニューは、モバイルデバイスでのみ呼び出されました。 JSファイルがモバイルでのみ呼び出されるようにすることで、デスクトップブラウザーの問題を解決しました。

0
Tom