使响应菜单插件正常工作

Question

这是代码

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

我收到错误app.js：37TypeError：this.toggleClass不是函数。 （在“ this.toggleClass（'showing'）'中，'this.toggleClass'未定义），当单击导航按钮时。

代码（无插件格式）有效。 是没有的插件。 我想念一些东西，但看不到。

提前致谢。

Answer 1

Ups，对不起。 我能够自己解决问题。 显然是var作用域问题。 如果设置var varname = this; 在任何子函数之外并使用varname代替this ，一切正常。

最终代码：

(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））;