Question

Ran into problem with creating custom select dropdown plugin in jQuery. I’m at the one-at-the-time-open feature. Meaning, that when you open a dropdown, then other(s) will close.
My first idea was to create some global array with all dropdowns in it as objects. Then in the “opening”-function, I would add the first line to first check that none of the dropdowns are open (if open, then close them.)

I created a very scaled version of my script: http://jsfiddle.net/ngGGy/1/
Idea would be to have only one dropdown open at the time. Meaning, that when you open one, other(s) must be closed, if not they will automatically close when a new one is opened.

Answer 1

You can keep track of the DropDownSelectized lists like this: http://jsfiddle.net/pimvdb/ngGGy/3/.

(function($){
    var lists = $(); // cache of lists

    $.fn.DropDownSelect = function (settings) {
        jQuery.globalEval("var zindex = 100");

        var thiselement = $(this);
        var thislist = thiselement.next('ul');
        lists = lists.add(thislist); // add current one to cache

        thiselement.click(function () {
            lists.slideUp(); // hide all lists initially

            if (thislist.is(':visible')) {
                thislist.slideUp();
            } else {
                thislist.css('z-index', ++zindex).slideDown();
            }
        });
    };
})(jQuery);