jQuery $.fn。功能未定义

Question

我一直在制作我的第一个小型 jQuery 插件 - 我使用带有标准功能的 javascript，但决定将它捆绑到一个带有几个选项的 jquery 插件中。

这是我的 jquery 代码的精简版：

(function($) {

        $.fn.responsiveNav = function( options ) {

            // Establish our default settings
            var settings = $.extend({
                selector         : '.responsive-nav'
            }, options);

            $( " " + settings.selector + " ul li" ).has( "ul" ).each(function() {
                $(this).addClass('responsive-nav-dropdown');
            });
            $( ".responsive-nav-dropdown" ).click(function() {
                $("ul",this).toggle();
            });

        }

    }(jQuery));

然后我通过执行以下操作在文档就绪中调用此函数：

$( document ).ready(function() {
    responsiveNav();
});

但这导致函数未定义错误。我猜这是某种范围界定问题，但我找不到任何东西来帮助我纠正这个问题。

Answer 1

该$.fn构造用于在 jQuery 对象上定义一个方法。因此，您需要像这样使用您的插件：

$('#myElement').responsiveNav();

或者，您可以将其设为 jQuery 变量本身的方法：

$.responsiveNav = function( options ) { // note: no .fn
    // your code...
}

// to call it:
$.responsiveNav({ /* options */ });