0

鉴于下面的 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();
            }
        };

    });

};
4

2 回答 2

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');
于 2012-06-12T22:54:00.453 回答
0

当然。给hideMenu全局窗口对象，如下所示：

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

然后，您可以在需要的任何地方照常调用它。

于 2012-06-12T22:48:39.500 回答