Click outside of the DIV to hide it

Question

This is a simple example of my HTML page, I have navbar with a dropdown menu display: 'none', and when I click on <li class="main-ul-li clickToDropDown">Example</li> it display the menu display: 'block'...

Now my question is: How can I hide the menu again when I click outside of it (outside of the li and the div)?
My code is 100% vanilla JavaScript

And thank you!

    const dropdown_function = () => {
        const dropdown_menu = document.querySelector('.dropdown-menu');
        const dropdown_li = document.querySelector('.clickToDropDown');

        dropdown_li.addEventListener('click', () => {
            dropdown_menu.style.display = 'block';
        });
    }
    dropdown_function();

   ul {
    list-style: none;
    }

    .main-ul {
        display: flex;
        align-items: center;

    }
    .main-ul-li {
        margin:10px 20px;
        cursor: pointer;
    }
    .dropdown-menu {
        position: absolute;
        top: 60px;    
        display: none;
    }

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>



<body>
    <header>
        <nav> <!-- Navbar -->
            <ul class="main-ul"> <!-- ul -->
                <li class="main-ul-li clickToDropDown">Example</li> <!-- li -->
                <div class="dropdown-menu"> <!-- dropdown menu -->
                    <ul>
                        <li>Example1</li>
                        <li>Example2</li>
                        <li>Example3</li>
                    </ul>
                </div>
                <li class="main-ul-li">Example</li>
                <li class="main-ul-li">Example</li>
            </ul>
        </nav>
    </header>
    
  
</body>
</html>

CSS only: when you use a 'focusable' element (like ``) you can use the `:focus` selector without any need for JS. Check my answer on a similar question on SO: [60723244: How to display a div when hovering...](https://stackoverflow.com/questions/60723244/how-to-display-a-div-when-hovering-over-an-image-using-css-html-transitions/60723884#60723884). It incorporates both `:hover` and `:focus` to show and click outside to hide again... — Rene van der Lende, May 14 '20 at 13:55

score 0 · Answer 1 · answered May 14 '20 at 11:49

EDIT:
I've found the solution-

const dropdown_function = () => {
    const dropdown_menu = document.querySelector('.dropdown-menu');
    const dropdown_li = document.querySelector('.clickToDropDown');

    dropdown_li.addEventListener('click', () => {
        dropdown_menu.style.display = 'block';

<!--func added-->
        document.addEventListener('mouseup', function(e) {
          if (!dropdown_menu.contains(e.target)) {
            dropdown_menu.style.display = 'none';
          }
        });
<!--/func added-->

        });
}

score 0 · Answer 2 · answered May 14 '20 at 11:50

0

You can add something like this:

document.addEventListener('click', function(event) {
    var isClickInside = dropdown_li.contains(event.target);
    if (isClickInside) {
      //More Stuff
    }
    else {
      dropdown_menu.style.display = 'none';
    }
});

answered May 14 '20 at 11:50

Raphael St

661
8
23

1

Thank you so much... Check my solution (edit) in the Answers section. – Joseph May 14 '20 at 11:54

Click outside of the DIV to hide it

2 Answers2