Question

I am currently working on a task to make a pop-up menu, and here is my code:

    <script type="text/javascript">
function dropMenu(){
    document.getElementById('dropdown').style.visibility = 'visible';
    document.getElementById('dropdown').style.display = 'block';
        
}
</script>

and here is the div I’m using the js function on:

 <div class="user-menu">
        <ul>
            <li><a href="#"><span>[History]</span></a></li>
            <li>
                <a href="#" id="username" onclick="dropMenu()">
                    <span>${currentUserDetails.firstName} ${currentUserDetails.lastName}</span>
</a>
        <div>
        <ul>
                    <li>
<a href="#" id="dropdown" style="display:none;"> 
    <span>Log Out</span> 
                    </a>
                    </li>
                </ul>
            </div>
          </li>
       </ul>
   </div>

As you can see I’m using the js function to make this menu in the div visible on click. Now here is my question. I need this menu to return invisible after clicking anywhere else. In other words, after clicking out this div, I need the div to be invisible.
Any suggestions?

Answer 1

You can bind a call to a new function that turns the element invisible.

At the end of the page, add the following script:

<script language="javascript" type="text/javascript">
    function dropMenu() {
        document.getElementById('dropdown').style.display = 'block';
    }        

    function hideMenu() {
        document.getElementById('dropdown').style.display = 'none';
    }        

    document.attachEvent('onclick', hideMenu);
</script>

By attaching the hideMenu function on the documents’s onclick event, every child element of the document (that is, every element inside BODY tag, an the elements insede these elements, and so on), when clicked, will fire the hideMenu function. Well, sort of, as you’ll see ahead.

It includes the username anchor. So, oddly, as you click the username anchor, it will call the dropMenu function, defined as the onclick event handler for the anchor, an the the event will “bubble up”, causing it to fire at every parent element of the anchor, finally reaching the document, which we have already defined the hideMenu event as the onclick event handler, causing it to hide the dropdown anchor again.

In fact, this “bubbling” mechanism is what causes the impression of the hideMenu being called for every element on the document, when, in fact, the click event of the clicked element will just bubble up until reach the document, firing his handler.

So, we have to modify the dropMenu function a bit to avoid this bubbling effect:

    function dropMenu() {
        window.event.cancelBubble = true;
        document.getElementById('dropdown').style.display = 'block';
    }

Now, when we click the username anchor, the dropdown anchor will be displayed, and will stay displayed. And when we click anywhere the page, it will be hidden.

It happend because we’ve setted the cancelBubble property of the window’s event object to true, indicating that this event may not bubble up, so the document onclick handler shall not fire.

I hope thie explanation is clear and be useful.