Hide a div when clicking on anything that is not the div

Question

I have a div called .dots_menu that shows up when clicking on .dots.

I am trying to write a code that hides this div whenever a user clicks on anything else that is not the .dots_menu div (ex: the background of the page around the div).

This is my HTML part:

<img src="3dots.png" class="dots"/>
<div class="dots_menu">
   <a href="#">Install</a>  
   <a href="#">Add to wishlist</a>  
</div>

This is my CSS part:

.dots{
    height: 25px;
    float: right;   
}

.dots_menu{
    display: none;
    width: 202px;
    position: absolute;
    top: 40px;
    right: 1px;
    z-index: 1;
    background: rgb(238, 238, 238);
    -webkit-box-shadow: 0px 4px 15px #000;
    -moz-box-shadow: 0px 4px 15px #000;
    box-shadow: 0px 4px 15px #000;
}

.dots_menu.show{
    display: block;
}

.dots_menu a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 10px;
    font-family: arial;
}

And this is my jQuery that doesn't work:

$('.dots').click(function(){
    $('.dots_menu').removeClass('show');
    $(this).next().addClass('show');
    $(document).one("click",function(){  //
      $('.dots_menu').removeClass('show');
    });
});

@emmanuel .one() means bind only once – webkit Dec 25 '14 at 11:55 — webkit, Dec 25 '14 at 11:55

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

off the top of my head:

$(document).click(function() {
    if( ! $(this).hasClass('dots_menu') && $('.dots_menu').hasClass('show')) {
        $('.dots_menu').removeClass('show');
    }
});

EDIT: according to https://stackoverflow.com/a/7385673/2061557

$(document).mouseup(function (e)
{
    var container = $(".dots_menu");

    if ( ! container.is(e.target) && container.has(e.target).length === 0)
    {
        $(".dots_menu").removeClass("show");
    }
});

You should also consider to use Twitter Bootstrap Modals http://getbootstrap.com/javascript/#modals

edited May 23 '17 at 12:16

Community

1
1

answered Dec 25 '14 at 11:59

Yiin

659
6
9

3

Please consider adding an explanation to your code. Code only answers get flagged as low quality by the system. – Mohamad Dec 25 '14 at 12:24
oh, thanks, didn't knew that :) – Yiin Dec 25 '14 at 12:28
The second one worked fine tnx. can you explane me please what is the "e" parameter and the "if" line. most of it isn't so understood, what happens there? – Imnotapotato Dec 25 '14 at 13:05
e is eventObject, there is quite a lot information about it in jQuery documentation: http://api.jquery.com/category/events/event-object/ container.is() checks if clicked object isn't .dots_menu, and container.has() is additional condition to check if you clicked on .dots_menu or not. length === 0. More information you can also find in jquery api documentation if you are intrested. – Yiin Dec 25 '14 at 17:02

score 0 · Answer 2 · answered Dec 25 '14 at 11:59

I think you can do this:

$('.dots').click(function(){
    $('.dots_menu').addClass('show');
});

$(document).find("*:not(.dots_menu)").one("click",function(){  
      $('.dots_menu').removeClass('show');
    });

Or this:

 $(document).one("click",function(e){  
      if (e.target.className!="dots_menu")  $('.dots_menu').removeClass('show');
 });

Hide a div when clicking on anything that is not the div

2 Answers2