使响应菜单插件正常工作

Question

Here is the code

    (function ( $ ) {

    $.fn.responsiveMenu = function( options ) {

        var settings = $.extend({
            hasChildrenElement : "li.menu-item-has-children",
            menuButton : ".responsive-menu-button",
        }, options );

        console.log( this );

        $(settings.hasChildrenElement).each( function () {
            $(this).append('<span class="touch-button"><i></i></span>');
        });

        $(settings.menuButton).on( 'click', function() {
            $(this).toggleClass( 'close' );
            this.toggleClass( 'showing' );
        });

        $('.touch-button').on( 'click', function() {
            if ( $('.responsive-menu').children('li:first-child').css('display') == 'block' ) {
                $(this).toggleClass( 'close' ).prev('ul').toggleClass( 'showing' );
            }
        });

    };

}( jQuery ));

$('.responsive-menu').responsiveMenu();

I get the error app.js:37TypeError: this.toggleClass is not a function. (In 'this.toggleClass('showing')', 'this.toggleClass' is undefined) when click on nav button.

The code (without plugin format) works. Is the plugin which not. I´m missing something but I can´t see it.

Thanks in advance.

Answer 1

Ups, I´m sorry. I was able to solve by myself the issue. Apparently is a var scope issue. If a set var varname = this; outside any child function and use the varname instead of this , everything works fine.

Final code:

(function ( $ ) {

$.fn.responsiveMenu = function( options ) {

    var settings = $.extend({
        hasChildrenElement : "li.menu-item-has-children",
        menuButton : ".responsive-menu-button",
    }, options );

    var mainElement = this;

    $(settings.hasChildrenElement).each( function () {
        $(this).append('<span class="touch-button"><i></i></span>');
    });

    $(settings.menuButton).on( 'click', function() {
        $(this).toggleClass( 'close' );
        mainElement.toggleClass( 'showing' );
    });

    $('.touch-button').on( 'click', function() {
        if ( $('.responsive-menu').children('li:first-child').css('display') == 'block' ) {
            $(this).toggleClass( 'close' ).prev('ul').toggleClass( 'showing' );
        }
    });

};

}( jQuery ));