Question

给出下面的jQuery下拉插件。有没有办法添加一个方法，允许在“hideMenu”下拉列表之外的单独函数？感谢

例如，如果我将插件应用于具有如下ID的div：

$('#settings.dropdown').dropDownMenu();

然后我如何调用从插件外部关闭dropDownMenu w hideMenu？感谢

jQuery.fn.dropDownMenu = function() {

    // Apply the Dropdown
    return this.each(function() {

        var dropdown = $(this),
            menu = dropdown.next('div.dropdown-menu'),
            parent = dropdown.parent();

        // For keeping track of what's "open"
        var activeClass = 'dropdown-active',
            showingDropdown = false,
            showingMenu,
            showingParent,
            opening;

        // Dropdown Click to Open
        dropdown.click(function(e) {

            opening = true; // Track opening so that the body click doesn't close. This allows other js views to bind to the click
            e.preventDefault();

            if (showingDropdown) {
                dropdown.removeClass(activeClass);
                parent.removeClass(activeClass);
                showingMenu.hide();
                showingDropdown = false;
            } else {
                showingDropdown = true;
                showingMenu = menu;
                showingParent = parent;
                menu.show();
                dropdown.addClass(activeClass);
                parent.addClass(activeClass);
            }
        });

        // When you click anywhere on the page, we detect if we need to blur the Dropdown Menu
        $('body').click(function(e) {       
            if (!opening && showingParent) {
                var parentElement = showingParent[0];

                if (!$.contains(parentElement, e.target) || !parentElement == e.target) {
                    hideMenu();
                }
            }

            opening = false;

        });

        // hides the current menu
        var hideMenu = function() {
            if(showingDropdown) {
                showingDropdown = false;
                dropdown.removeClass(activeClass);
                parent.removeClass(activeClass);
                showingMenu.hide();
            }
        };

    });

};

Answer 1

jQuery建议通过插件本身提供多种方法：

jQuery.fn.dropDownMenu = function(method) {

    var methods = {
        init: function() {
            // Put all your init code here
        },
        hide: function() {
            hideMenu();
        }
    };

    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }

    function hideMenu() {
        // ...
    }

};

请参阅http://docs.jquery.com/Plugins/Authoring#Plugin_Methods

更新：像这样使用：

// Use the plugin normally to run the init method
$('#settings.dropdown').dropDownMenu();

// Call the hide method
$('#settings.dropdown').dropDownMenu('hide');

Answer 2

不确定。将hideMenu赋予全局窗口对象，如下所示：

    window["hideMenu"] = function() {
        if(showingDropdown) {
            showingDropdown = false;
            dropdown.removeClass(activeClass);
            parent.removeClass(activeClass);
            showingMenu.hide();
        }
    };

然后，您可以随时随地调用它。

在全局访问插件中创建方法？

2 个答案: