Click outside menu to close it

close mobile menu on click outside
close dropdown on click outside pure javascript
bootstrap dropdown close on click outside
close menu on click outside react
close dropdown on click outside javascript
show/hide menu on click jquery
how to close menu on click
dropdown auto close outside click

Here's my function,

$(document).ready(function () {
   $('.a').click(function () {
     var here = $(this).next('.b');
    if (here.is(":visible")) {
        here.hide();
    } else {
        here.show();
    }
    return false;
  });
});

So, whenever I click the button it opens a small tab on same webpage & whenever I click it again it closes it. But once I open the tab I can't close it by just clicking somewhere on webpage apart from tab. I have to click the button again to close it.

How can I close tab just by clicking somewhere on webpage also by on the button?


On document click, the closest helps to check whether the tab has been clicked or not:

$(document).click(function (e) {
    if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
       $('.b').hide();
    }
});

How to Close a Toggle Menu with an Outside Click – Beacon Blog, A very simple way to close a sub menu when clicking outside the menu button area or the expanded menu itself. Close Div or Menu On Click Outside w/ Javascript. If you program in Javascript, you’ve probably run across the situation where you want to have menus that open on a click, and that close when the user clicks outside the menu. I’ve developed a pretty simple way to do just that.


You want to check for a click on the body :

$("body").click(function(e) {
  if(e.target.id !== 'menu'){
    $("#menu").hide();
  }      
});

menu would be the id of the menu.

If the body is clicked and the id of the div clicked doesn't equal that of the menu, then it closes.

Hide Dropdown Menu on Click Outside of the Element in jQuery, You can use the jQuery click() method in combination with the on() method to hide the dropdown menu when the user click outside of the trigger element. The default behavior of a dropdown menu is to close the menu list items when clicked inside. In this article, We will use stropPropagation method to prevent the dropdown menu from closing the menu list.


Check this implementation

jQuery(document).ready(function() {
    $(document).on('click','body, #btn',function(ev){
        ev.stopPropagation()
        if(ev.target.id== "btn"){
            if($('#modal').is(':visible')) {
                  $('#modal').fadeOut();
            } else{
              $('#modal').fadeIn();
            }
          } else {
            $('#modal').fadeOut();
        }
      });
});
html, body {
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
  Click Me!
</button>

<div id="modal" style="background-color:red;display:none;">
  BLA BLA BLA
</div>

jQuery: click outside to close menu, Close an open menu by clicking outside of the menu element. In order to close the menu they'd have to go click on the menu button again. The technique here is that we need to register a click on the document, and when a user clicks anywhere we check if the click occurred in our container. If it didn't occur in our container then we can close the menu, or do some other action that you desire.


I end up searching for this on almost every project, so I made this plugin if it helps anybody:

jQuery.fn.clickOutside = function(callback){
    var $me = this;
    $(document).mouseup(function(e) {
        if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
            callback.apply($me);
        }
    });
};

It takes a callback function and passes your original selector, so you can do this:

$('[selector]').clickOutside(function(){
    $(this).removeClass('active'); // or `$(this).hide()`, if you must
});

Nice, chainable, elegant code.

Click Outside Close Menu Box JavaScript - JavaScript, Hello, I had written a code to close the menu when clicking outside, but it's not working can anyone tell what's wrong in my code. Code: <! Detecting a Click Outside an Element in JavaScript. Detecting a click outside an element in JavaScript is a very common pattern that can be used to close a non modal user interface component like a flyout, a menu or a dropdown when the user clicks outside this element. While searching on the web there are a lot of various jQuery solutions


Close dropdowns by clicking outside of them with jQuery (Example), When someone clicks it, we look for the event's target id. If it matches the ID of the box's div, then do nothing. If it doesn't, close the menu. Let's evaluate the scenarios. Users expect clicking on menu to close. If it closes on menu clicking => good ; Whether it closes touching outside or not=> don't care, because they'll use the button.


JavaScript Click Outside Close Menu Box Tutorial, If you have ever found with menus boxes that open on click event, but want them to close when a click event occurs outside of that dom elements. What can I do so that I don't need to re-click the menu icon but can simply click off the navbar to close it? Thank you! bedakb 2016-05-15 11:24:10 UTC #2


Close Div or Menu On Click Outside w/ Javascript, <h2>W3.CSS Modal</h2> <p>In this example we demonstrate how to close the modal by clicking outside of the modal box.</p> ​ <button onclick="document. Close dropdowns by clicking outside of them with jQuery. When you use a click event to trigger a dropdown, the best option to close it is to allow people to 'click off' and close it. It's actually quite simple to do once you understand what's happening.