Add an “click outside of menu to close” jQuery / Javascript to a menu drop-up that has .toggle()

Question

I would like to add the function to close the menu if I click outside the menu.

And also keep the menu button working to close it too: https://jsfiddle.net/ezkay/1he5bhzt/

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
    });
});

Also can you tell me if this is correct for mobile etc? I hope and think so, because it's using .click, right?

This is referring to this post, that I can't reply to the answer to ask there: How to change drop-down menu to drop-up menu

Answer 1

DEMO

The following does the trick.

$(document).on('click',function (e) {
  footerUl = $('ul:first li');
  if (!footerUl.is(e.target) 
      && footerUl.has(e.target).length === 0){
    footerUl.children('ul').hide();
  }
});

 $(document).ready(function () { $("li").click(function () { $('li > ul').not($(this).children("ul").toggle()).hide(); }); }); $(document).on('click',function (e) { footerUl = $('ul:first li'); if (!footerUl.is(e.target) && footerUl.has(e.target).length === 0){ footerUl.children('ul').hide(); } }); 

 div { background: #999999; height: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #000000; margin: -8px; width:100%; position:fixed; bottom:0px; } ul, li, a { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: #000000; } ul > li { float: right; } ul > li a { color: #fff; font-weight: bold; line-height: 40px; height:40px; display:block; padding:0px 10px; } ul li a:hover { background: #666666; } ul li ul { display: none; position: absolute; background: #333333; bottom:40px; width: 200px; right: 0px; } ul li ul li { float: none; line-height: 40px; height: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div> <ul> <li><a href="#">=</a> <ul> <li><a href="#">one</a> </li> <li><a href="#">two</a> </li> <li><a href="#">three</a> </li> </ul> </li> </ul> </div> 

Answer 2

I would attach click event to the document and then check for child elements. Assuming your LI element has class "menu":

$(document).click(function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("menu")) {
        //close menu here
    }
});

Answer 3

Assuming that you want to close when somebody clicks outside the ul tag. You need to capture all click events in the document. And then check if the click happened outside the ul tag. If it was outside then close the menu

var myelement = $('ul')
$(document).on('click', function(e) {
    var el = e.target();
    if(!$.contains(myelement, el)) { //checks if the click happened outside the ul tag
        //close menu
    }
})