hiding an element on click of anything else on the page

Question

referring to Franek's question found here I have one more question.

The solution on the link above worked for me until I introduced another menu to my page. In this case, there are two menus next to each other. When I click on one of them, the relevant div is displayed showing possible options to select. Then, when I click on the document the div gets closed. But when I click on any other element it is still displayed.

A solution for me would be to run the code to close the menu on any other element click as well as document click.

How can I achieve this ?

(menu: invisible div element that when clicked on its title becomes visible)

score 33 · Accepted Answer · edited Sep 29 '11 at 05:56

33

This is slightly better, as it also check the parent(s) of the element being clicked:

$(document).click(function(e) {
    var target = e.target;

    if (!$(target).is('#menu') && !$(target).parents().is('#menu')) {
        $('#menu').hide();
    }
});

edited Sep 29 '11 at 05:56

Darryl Hein

142,451
95
218
261

answered May 23 '09 at 23:59

Anh

6,523
7
46
59

2

Note, this will not work on any elements, including descendants that stop DOM propagation (bubbling). – Ricky Boyce Dec 21 '13 at 02:50

score 13 · Answer 2 · answered May 23 '09 at 23:38

13

Clicking on every element but the menu that you want to hide right?

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

answered May 23 '09 at 23:38

coma

16,429
4
51
76

1

This is the best answer when a _complex_ application is altering the DOM's propagation many times. – Ricky Boyce Dec 21 '13 at 02:55

score -2 · Answer 3 · edited Feb 22 '13 at 08:56

my html code is

<div class="filter-show">
    <ul style="display:none;">
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
    </ul>
</div>

and jquery code is

<script>
    $('html').click(function(event){
        if(!$(event.target).children().is('.filter-show > ul')){
            $(".filter-show > ul").fadeOut();
        }
    });
    $(".filter-show").click(function(){
        $(".filter-show > ul").fadeOut();
        $(this).children('ul').fadeIn();
    });
    $(".filter-show > ul").hover(function(){
        //
    },function(){
        $(".filter-show > ul").fadeOut();
    });
</script>

hiding an element on click of anything else on the page

3 Answers3

Linked