How to use Javascript to close css drop down menu on outside click?

Question

I want to use pure javascript (not jquery) to close a pure css drop-down menu I have created when clicking outside of the menu. How can I do this?

HTML:

<ul>
    <div class="submenu">
        <ul></ul>
    </div>
    <div class="submenu">
        <ul></ul>
    </div>
</ul>

That's the basic structure of my HTML. I want to close the submenu if clicking outside of the submenu. Any way to do so with pure javascript? So far I've tried this:

Javascript:

        <script>
            document.onclick = closeMenu();
            function closeMenu() {
                document.getElementsByClassName("submenu").style.display = 'none';
            }
        </script>

This doesn't seem to work. Any ideas?

Possible duplicate of http://stackoverflow.com/questions/6463486/jquery-drop-down-menu-closing-by-clicking-outside — Nilesh Mahajan, May 05 '15 at 18:17
The question specifies pure javascript and the duplicate link is an answer using jQuery — wahwahwah, May 05 '15 at 18:20
you should just have `document.onclick = closeMenu` however this will still fire when you click on the menu itself since you are observing the whole document you need to exclude your list from the observer. — Zac, May 05 '15 at 18:23
@Shaggy Yes, but not on a touch screen device. I am doing this to make my site mobile-compatible. — Joseph Webster, May 05 '15 at 19:15
Still no need for JavaScript. "Click" anywhere else on your page and the `:hover` pseudo class no longer applies. — Shaggy, May 05 '15 at 19:24

score 0 · Accepted Answer · answered May 05 '15 at 18:36

0

A few changes: you are assigning the onclick incorrectly, it should be a reference to your function, not the result of calling your function:

 document.onclick = closeMenu;

Second, you need to use event delegation to determine if the clicked element is a descendent of your submenu div. Something like this function should work for figuring out if the event target node is a child of submenu:

function parentIsSubmenu(child) {
     var node = child.parentNode;
     while (node != null) {
         if ((node.className || '').indexOf('submenu') > -1) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

Alter your closeMenu function to check if the clicked element is a child of submenu, if not, loop through each submenu item and set display to none (what you currently have would not work).

function closeMenu(event) {
    if(!parentIsSubmenu(event.target)) {
        var submenus = document.getElementsByClassName("submenu");
        for(var i = 0; i < submenus.length; i++) {
            submenus[i].style.display = 'none';
        }
    }
}

Here is a working example: https://jsfiddle.net/m2muz5en/

answered May 05 '15 at 18:36

Rob M.

35,491
6
51
50

It works, however after it closes the submenu, upon trying to reopen it it will not open. – Joseph Webster May 05 '15 at 19:11
You just need to include your submenu trigger in your event target check like this: https://jsfiddle.net/m2muz5en/1/ – Rob M. May 05 '15 at 19:15
my trigger is the :hover pseudo class in css. How would I implement that as my submenu trigger? Sorry, I'm really new at all this. – Joseph Webster May 05 '15 at 19:20
I think you need to post more of your code (including css). If the `:hover` pseudo class is controlling whether or not your menu is displayed, it would follow that not hovering over it would hide it. – Rob M. May 05 '15 at 19:24
Well the problem is that on touch screen clicking opens the menus but clicking off of them doesn't close them. – Joseph Webster May 05 '15 at 19:25
any ideas on how to fix that? – Joseph Webster May 05 '15 at 22:18

How to use Javascript to close css drop down menu on outside click?

1 Answers1