jQuery dropdown plugin to prevent scanning the whole DOM on every click

Question

Here is a simple plugin I have written for a jQuery dropdown effect. Simple show / hide (although open classes may be better).

When you click the HTML the event searches the whole DOM for a specific class and then hides it (or removes the open class), even if the dropdown is already close.

Is there a way to only apply the events to open dropdowns somehow?

$.fn.dropdown = function () {

        return this.each(function () {

            // Initial varaibles
            var $this = $(this),
                $toggle = $this.find('.dropdown-toggle'),
                $dropdown = $this.find('.dropdown-menu');

            // When clicking a dropdown toggle
            $toggle.click( function(e){

                // Stop the default behaviour
                e.preventDefault();

                // Clear any open dropdowns
                clearDrops();

                // Stop the event from bubbling up the DOM tree
                e.stopPropagation();

                // Toggle the dropdown
                $dropdown.toggle();

            });

            // Clear the dropdowns
            var clearDrops = function () {
                // Search the entire DOM for dropdowns & hide them
                // THERE MUST BE A BETTER WAY
                $('.dropdown-menu').hide();
            };

            // Trigger the closing of dropdowns when clicking on the HTML
            $('html').bind('click', clearDrops);

        });

    };

$('.dropdown').dropdown();

Answer 1

Comments:

• Don't use the name 'dropdown' that has a very high probability for naming collisions with other libraries.
• I get that you might want to do stuff as a learning experience but you are recreating something that already exists (as a matter of fact a lot of versions of this widget exist). You might want to check out how something like chosen works.
• In a similar vein, this ain't gonna work with keyboard input. Maybe you don't need it, but people would expect a dropdown widget to work with keyboard input
• This seems to require that a certain html structure exists. Someone using this without that knowledge will get confusing and silent failures. The way that jquery ui widgets usually handle this is to hide the initial element and then use jquery.after() to create the expected elements right after it
• Actually you really should use the jquery ui widget factory that is a better fit for this then just a bare jquery plugin. (Jquery plugins generally are better for adding behaviors, JqueryUi Widget Factory is the preferred way to create enhanced controls)
• Are you sure you want to only close dropdowns on a click event? That seems far too simplistic. What if someone opens your dropdown and uses the tab key to tab to other fields? Usually something like this will close when focus is lost (I believe that is the blur event)
• I'm not sure if everything is a child of the html element - detached pop-up dialogs made via jquery ui for example. (not sure about this one)
• You do not need to stop propogation nor clearMenus when the toggle is clicked. The click will propagate up to the html element and close it then.
• You will bind the clearDrops function to the html element's click event as many times as there are controls on the page - you only need it once. Do a check or unbind.
• Is scanning the whole DOM really a problem? The scan only happens when the user interacts with the page, she will have to click on things very quickly indeed for this to be a real preformance problem.

A direct answer to your question: Just remember what dropdown controls have been initialized and hide those.

( function($) {
    var initializedDropdowns = $();

    $.fn.dropdown = function () {

            return this.each(function () {

                var $this = $(this),

                ...
                initializedDropdowns.add($this)
                ...
                var clearDrops = function () {
                    initializedDropdowns.hide();
                };
                ...
            });

        };
} )(jQuery)