CODEWITHSUNDEEP
javascriptjquery
user8733268
user8733268

Reputation:

Click outside menu to close it

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?

Upvotes: 1

Views: 11325

Answers (6)

sean comor
sean comor

Reputation: 59

you have to add a click listener to the parent element, like here:

    $('.parent-div').click(function() {
    //Hide the menus if visible
    });

Also because click events bubbled up from child to the parent, you can exclude the click on the child element to get bubbled up and count as the parent click too. you can achieve this like below:

    //disable click event on child element 
    $('.child-div').click(function(event){
    event.stopPropagation();
    });

Upvotes: 0

Phil Tune
Phil Tune

Reputation: 3305

I end up searching for this on almost every project, so I made this plugin:

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.

Upvotes: 3

zumek
zumek

Reputation: 608

To check if the clicked element is outside of a given container, i.e. a menu, we can simply check if the event target is a child of the container. Using JQuery -

$('body').click(function(e) {

    if ( 0 === $(e.target).parents('#container-id').length ) {

        /// clicked outside -> do action

    }

})

Upvotes: 0

Shashank
Shashank

Reputation: 5660

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();
    }
});

Upvotes: 2

A.T.
A.T.

Reputation: 26312

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>

Upvotes: 0

Unknown
Unknown

Reputation: 799

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.

Upvotes: 0

Related Questions