Hide menu when pressed anywhere except menu

Question

I have a menu that appears when I click the icon. Currently, I can close it by clicking the close icon, but I would like to be able to close it by clicking anywhere outside the menu when the menu is visible.

Here is jsFiddle: http://jsfiddle.net/budapesti/3v5ym2bp/3/

For example, the following does not work:

$(document).click(function() { if($('.menu').is(":visible")) { $('.menu').hide() } }); 

I found similar questions, such as jQuery: hide an element on a click in a place other than the element and How do I detect a click outside the element? but failed to get solutions to work for me.

---

EDIT: I wonder if (": visible") works with jQuery "animate"?

Answer 1

Use the css left attribute to determine if the menu is displayed instead of :visibe because it works with chrome, see jquery.is (": visible") does not work in Chrome .

You only need to determine if the menu is visible (use the css attribute on the left), because if the menu css left=0px means that it is visible, and after that, if click is outside the menu or not, and therefore if outside it.

Take a look at your upgrade script working fine by adding the following handle that detect external click:

JS:

 $(document).click(function(e) { //if the menu is visible if($(".menu").css('left') =="0px"){ //if the click is outside of menu if($(e.target).closest('.menu').length == 0){ $('.closed').click(); } } }); 

Answer 2

call the close function anywhere by clicking on the window. And use event bubbles. I updated his jsfiddle link

 > http://jsfiddle.net/rahulrchaurasia/3v5ym2bp/19/ 

Answer 3

Try the following: http://jsfiddle.net/3v5ym2bp/13/

HTML

 <div class="inv"></div><!-- Added an invisible block --> <div class="menu"> <span class="glyphicon glyphicon-remove closed pull-right"></span> <ul> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> <div class="icon-menu"> <span class="glyphicon glyphicon-menu-hamburger"></span>MENU</div> 

CSS

 .menu { position: fixed; width: 285px; height: 100%; left: -285px; background: #202024; z-index: 1; } .glyphicon-remove, ul { color: #fff; padding: 10px; } /* Added an invisible block */ .inv { display:none; width:100%; height:100%; position:fixed; margin:0; } 

JQuery

 "use strict"; var main = function () { $('.icon-menu').click(function () { $('.icon-menu').hide(); $('.inv').show(); //added $('.menu').animate({ left: "0px" }, 200); }); //Added $('.inv').click(function () { $('.inv').hide(); $('.menu').animate({ left: "-285px" }, 200); $('.icon-menu').show(); }); $('.closed').click(function () { $('.inv').hide();//added $('.menu').animate({ left: "-285px" }, 200); $('.icon-menu').show(); }); }; $(document).ready(main); 

Another simple example: http://jsfiddle.net/3v5ym2bp/17/

Answer 4

I suggest you bind the event to a document click after the menu has been displayed, an event that ensures that every click anywhere on the external menu closes it.

 $(document).on("click.menu",function(event) { var target = $(event.target); if (!target.closest(".menu").length || target.closest(".closed").length) { closeMenu(function() { $(document).off("click.menu"); }); } }); 

here you will need to evaluate the event object, and which trigger - which element, if it is inside the menu (except for the close button), then it does not perform injection, if outside, then close the menu. All closing things are placed in a separate function. also do not forget to cancel this handler from the document after closing

http://jsfiddle.net/3v5ym2bp/15/

working demonstration

Answer 5

 var main = function() { $('.icon-menu').click(function() { $('.icon-menu').hide(); $('.menu').animate({ left: "0px"}, 200); }); $('.closed').click(function() { $('.menu').animate({ left: "-285px"}, 200); $('.icon-menu').show(); }); }; $(document).ready(main); var rahul=0; $(window).click(function(e) { $('.menu').animate({ left: "-285px"}, 200); $('.icon-menu').show(); }); 

 .menu { position: fixed; width: 285px; height: 100%; left: -285px; background: #808080; z-index: 1; } .glyphicon-remove, ul { color: #fff; padding: 10px; } 

 <div class="menu" onclick="event.cancelBubble=true;"> <span class="glyphicon glyphicon-remove closed pull-right"></span> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </div> <div class="icon-menu" onclick="event.cancelBubble=true;"> <span class="glyphicon glyphicon-menu-hamburger"></span>*MENUS* </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>