Question

Given the jQuery dropdown plugin below. Is there a way to add a method that would allow for a separate function outside of the dropdown to ‘hideMenu’? Thanks

For example, if I applied the plugin to a div with an ID like so:

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

How could I then call to close the dropDownMenu w hideMenu from outside of the plugin? Thanks

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 advises making multiple methods available through the plugin itself:

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() {
        // ...
    }

};

See http://docs.jquery.com/Plugins/Authoring#Plugin_Methods

Update: Use like this:

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

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