javascript - 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 中调用此函数:

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

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

Answer 1

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

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

或者，您可以使它成为 jQuery 变量本身的方法:

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

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