CODEWITHSUNDEEP
javascriptonclick
Anton Matyulkov
Anton Matyulkov

Reputation: 722

How do I make opening one dropdown close the other one?

I'm trying to learn pure native JavaScript, so please, don't suggest using frameworks to solve the task. I know the're awesome and learning them will be the first thing I'm going to do when I'm done with pure JS :)

Now, the question. Fiddle

As you can see, I have two custom dropdowns there. Each of them can be opened and controlled both with mouse and keyboard. The last thing I need to do to solve this task is to implement the following functionality: opening one dropdown should close the other one, and clicking outside the dropdown should close any of the opened dropdowns (assuming only one can be opened at a time).

I've tried adding an onclick listener to the document, which would close the dropdowns if any of them were open but not used before, but after I've clicked the document once, the dropdowns are not showing any more. But that's not even a solution for half of the problem. since I allocate flags bIsOpen to the objects, I can't access them from another object to see if it's triggered.

Give me a hint, please :)

Upvotes: 2

Views: 390

Answers (1)

Waleed Khan
Waleed Khan

Reputation: 11467

Move the opening and closing logic into their own functions:

DropDown.prototype.open = function (e) {
    ...
}

DropDown.prototype.close = function (e) {
    ...
}

And 

this.htmlDropDown.onclick = function (e) {
    if (this.bIsOpen) {
        this.open(e);
    } else {
        this.close(e);
    }
}

(Make sure that the open and close functions adjust bIsOpen, not the onclick handler.)

Then, add a list of all the current dropdowns that exist:

function DropDown(htmlObject) {
    DropDown.dropdowns.push(this);
    ...
}

DropDown.dropdowns = []; // no 'prototype'

And finally, in the open-er, close all the other dropdowns:

DropDown.prototype.open = function (e) {
    var dropdown;
    for (var i = 0; i < DropDown.dropdowns.length; i++) {
        dropdown = DropDown.dropdowns[i];
        if (dropdown !== this) {
            dropdown.close();
        }
    }
    ...
}

Upvotes: 1

Related Questions