Hide element if click target is not itself or its children using jQuery

Question

I am having a bit of an issue with showing and hiding a menu using jQuery. What I am trying to do is:

If a button is pressed, then show a menu div. If the somewhere other than the div is clicked, hide the menu div.

Here's where my issue comes in. The above works perfectly, but when you click on an element which is inside of the div, the menu is hidden, which is not my intended outcome. My code is as follows:

$(document).ready(function() {
    $(document).click(function(e) {
        if (e.target.id != "projectEdit") {
            if (e.target.id != "projectEditMenu") {
                $("#projectEditMenu").hide();
            }
        } else {
            $("#projectEditMenu").show();
        }
    });
});

How can I make it so that if the children of the menu div were excluded from this argument, it keeps the menu open if the children are clicked on?

HTML code:

    <div id="projectEditMenu">

        <div id="projectEditMenuMarker"></div>

        <div id="projectEditMenuAddTile">

            <span id="projectEditMenuAddTileTitle">Add Tile</span>

            <form id="newTileForm" action="openProject.php" method="put" hidden></form>

            <input form="newTileForm" type="text" name="newTileName" id="newTileNameInput" placeholder="Tile Name">

        </div>

    </div>

the "concept" is called "click outside"... http://stackoverflow.com/q/152975/104380 — vsync, Oct 12 '14 at 20:27

charlietfl · Accepted Answer · 2014-10-12T20:38:07.103

9

You can use closest() which will include descendents of the selector passed as argument and the element itself

Example:

$(document).click(function (e) {
     var $tgt = $(e.target);
    if ($tgt.closest("#projectEdit").length) {
        alert('I am part of "#projectEdit"');
    }   

});

closest() API Docs

edited Oct 12 '14 at 20:38

answered Oct 12 '14 at 20:30

charlietfl

170,828
13
121
150

score 0 · Answer 2 · answered Oct 12 '14 at 20:31

Try this:

var textArea = $('#textarea');

textArea.click(function() {

    textArea.addClass('selected');

});

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

    if( textArea.is('.selected') &&
        !$(e.target).is(textArea)){

        textArea.removeClass('selected');

    }

});

score 0 · Answer 3 · answered Oct 12 '14 at 20:37

Another solution

$(document).ready(function() {
    var in_menu = false;
    $('#projectEdit').click(function() {
        in_menu = false;
        $("#projectEditMenu").show();
        $('#projectEditMenu').hover(function() {
            in_menu = true;
        }, function() { 
            in_menu = false;
        });
        $('html').click(function() {
            if( !in_menu ) { 
                $("#projectEditMenu").hide();
                //delete all events
                $('#projectEditMenu').unbind();
                $('html').unbind('click');
            }
        });
    });
});

Hide element if click target is not itself or its children using jQuery

3 Answers3