Jquery: how to make div disappear when click outside

Question

I tried Chinnu R's approach, but when I click anywhere outside the div, menu items not hiding, only when I click inside the div, menu items hide, I want the opposite, ie, click outside div, hide, click inside div, stay put.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
$(document).ready(function() {
        $("button").click(function() {
            $('div#nomore').toggle();
        });


        $("body > *").not("body > button").click(function(e) {
            $('div#nomore').hide();
        });
    });

</script>

</head>
<body>
<button>MENU</button>
<div id="nomore" style="display:none; background-color:yellow; width:300px;">
<br>
<a href="www.yahoo.com">Yahoo</a><br>
ITEM 2<br>
ITEM 3<br>
ITEM 4<br>
ITEM 5<br>
</div>
</body>
</html>

check this jsfiddle,i think rhis will solve your problem. [1]: http://jsfiddle.net/jc7xA/1/ — Sanjay, Nov 07 '13 at 04:57

Krish R · Answer 1 · 2013-11-07T13:27:13.710

4

Can you try this,

        $(document).ready(function() {
            $("button").click(function() {
                $('div#nomore').toggle();
            });

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

Other method:

        $(document).ready(function() {
            $("button").click(function() {
                $('div#nomore').toggle();
            });         


            $("body > *").not("body > button").click(function(e) {
                $('div#nomore').hide();
            });
        });

Updated code:

            $("body > *").not("body > button").click(function(e) {
                 console.log(e.target.id);
                if(e.target.id=='nomore'){
                        return false;
                 }
                 $('div#nomore').hide();

            });

edited Nov 07 '13 at 13:27

answered Nov 07 '13 at 04:55

Krish R

22,583
7
50
59

Chinnu, I tried the second method, it's so close but not quite, because when I click on the div, menu items hide alright, but I want menu items to hide when click *outside* the div. – Cindy Turlington Nov 07 '13 at 11:12
how do I modify to exclude div for this statement:$("body > *").not("body > button").click(function(e) { – Cindy Turlington Nov 07 '13 at 11:49
Updated the code can you check it – Krish R Nov 07 '13 at 13:27

score 3 · Answer 2 · answered Nov 07 '13 at 04:47

3

Use:

$("button").click(function (e) {
    e.stopPropagation();
    $('div#nomore').toggle();
});
$('body').click(function () {
    $('div#nomore').hide();
});

jsFiddle example

answered Nov 07 '13 at 04:47

j08691

204,283
31
260
272

score 1 · Answer 3 · answered Nov 07 '13 at 04:48

1

$(document).mouseup(function (e)
{
        $('div#nomore').hide();
});

answered Nov 07 '13 at 04:48

Neel

11,625
3
43
61

will not show even when button is clicked!!! – TheVillageIdiot Nov 07 '13 at 04:51
try to fiddle it it will show when button is clicked!! – Neel Nov 07 '13 at 04:53

score 1 · Answer 4 · answered Nov 07 '13 at 04:52

stopPropagation on the events for button and div#nomore and bind a click to window.

That way when window is click anywhere but button or div#nomore, it will hide the menu.

$(document).ready(function(){
    $("button").click(function(e){
        $('div#nomore').show();
        e.stopPropagation();
    });
    $('div#nomore').click(function(e){
        e.stopPropagation();
    });
    $(window).click(function(){
        $('div#nomore').hide();
    });
});

And if you want the menu to disappear when you click on one of the menu items, remove the $('div#nomore').click ... block.

JSFiddle example.

score 1 · Answer 5 · answered Nov 07 '13 at 04:56

Try this,

$('*:not(div#nomore)').on('click',function(e){
    e.stopPropagation();
    if(e.currentTarget!='button' &&  $('div#nomore').is(':visible'))
    {
        $('div#nomore').hide();
    }
    else
    {
        $('div#nomore').toggle();
    }
});

Demo

score 1 · Answer 6 · answered Nov 07 '13 at 05:36

1

replace the div as shown below`

<div id="nomore" tabindex="-1" onblur="$('div#nomore').toggle();"

answered Nov 07 '13 at 05:36

raghu

59
1
9

score 1 · Answer 7 · answered Nov 08 '13 at 16:20

1

after extensive research, I have determined that it is impossible to make this work on all platforms: desktop, android and iphones, need to adopt a different approach...

answered Nov 08 '13 at 16:20

Cindy Turlington

2,456
3
15
20

score 0 · Answer 8 · answered Nov 07 '13 at 04:46

0

Try this....

$(document).mouseup(function (e)
{
    var container = $("#yourDiv Id");

    if (!container.is(e.target) // if the target of the click isn't the div...
        && container.has(e.target).length === 0) // ... nor a descendant of the div
    {
        container.hide();
    }
});

answered Nov 07 '13 at 04:46

Manwal

23,450
12
63
93

no mouse, this is for mobile devices too. – Cindy Turlington Nov 07 '13 at 14:02

score 0 · Answer 9 · answered Nov 07 '13 at 04:49

0

$('body :not(div#nomore)').on('click',function(){
 $('div#nomore').hide();
})

answered Nov 07 '13 at 04:49

Ankit Tyagi

2,381
10
19

will not show even when button is clicked!!! – TheVillageIdiot Nov 07 '13 at 04:51

Jquery: how to make div disappear when click outside

9 Answers9