Pure JavaScript solution to jQuery.closest for closing a menu

Question

I have a piece of code that closes a drop down menu, if you click somehwere on the document other than the opened menu itself. I would like to get rid of jQuery, but I'm not sure how to translate this code to pure javascript.

     $(document).ready(function() {
       $(document).click(function(event) {
         if (!$(event.target).closest('li.main').length) {
           if ($('li.main').is(":visible")) {
             $('#dropdown').hide();
           }
         }
       })
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="main" onclick="ToggleMainMenu();"><span>All categories</span>
  </li>
  <li> <a href="/item1">Item 1</a> 
  </li>
  <li> <a href="/item2">Item 2</a> 
  </li>
  <li> <a href="/item3">Item 3</a> 
  </li>
</ul>

what does your html look like? you might be able to use childNode — Cruiser, Jan 10 '17 at 14:58
Are you using jQuery in the other sections of the document? Making a non-jQuery solution is not an issue but this example heavily relies on the css given here to be as is. — Dellirium, Jan 10 '17 at 14:58
I'm not using jQuery anywhere else. That's why I don't want to use it. — manfromtheoffice, Jan 10 '17 at 15:17
.closest() is not the only jquery in your code sample here. you have a lot of it in just this snippet — Cruiser, Jan 10 '17 at 15:47
Provide complete relevant HTML (and css), this is not sufficient. — sinisake, Jan 10 '17 at 16:27

score 0 · Answer 1 · edited May 23 '17 at 12:13

Your click handler is doing the following:

if ( clicked object is a descendent of "li.main" AND "li.main" is visible)
    hide "#dropdown"

If you add the onclick attribute to the node "li.main" or one of its descendents - as you added ToggleMainMenu in your comment - then you guarantee: - The clicked item is "li.main" or is a descendent of "li.main" - "li.main" is visible (since you cannot click an invisible item)

At this point you do not need comparisons any more and you only need to hide "#dropdown" in ToggleMainMenu function's body. Copying from javascript hide/show element :

document.getElementById("dropdown").style.display = "none";

p.s. I used jquery selector notation for brevity

score 0 · Answer 2 · edited Jan 10 '17 at 18:13

Sometimes it's easier than you think. I found a solution:

document.addEventListener("DOMContentLoaded", function (event) {

    document.addEventListener('click', function (e) {
        var mainMenu = document.getElementById('main');

        if (!mainMenu.contains(e.target)) {
            document.getElementById('dropdown').style.display = 'none';
        }
    }, false);

});

I didn't know about contains.

Pure JavaScript solution to jQuery.closest for closing a menu

2 Answers2