Trouble with jquery show and hide [closed]

Question

I'm having a ton of trouble trying to get simple jquery functionality to work. All I want is to be able to click on a menu button and have a menu pop up and click outside of it to close it. I think the problem may have to do with the parent to child structure of my code. Please offer any advice into what I may be doing wrong.

<div id = "outer-screen">
<div id = "screen-container">
  <div id = "screen">
        <div id = "menu-container">

        </div>
        <div id = "bottom-panel">
            <div id = "menu-button">
            Menu
            </div>
        </div>
  </div>
</div>

$("#menu-button").click(function(){
    $("#menu-container").show();
});

})

$('body').click(function(e){
if ( e.target.id == 'menu-container'){
    return true;            
}else{
     $('#menu-container').hide();
}
})

Answer 1

The $('body').click function will override the first function declaration (they might actually both get called but the function bound to the body's click event seems to take precedence), what this means is that when you click on #menu-button the menu-container will be shown and immediately hidden since you clicked outside it. Use the following

<script type="text/javascript">

$(document).click(function() {

    $('body').click(function(e){
        if ( e.target.id == 'menu-button'){
            $("#menu-container").show();
        }else if(e.target.id == 'menu-container'){
            return true;
        }else{
            $('#menu-container').hide();
        }
    });

});



</script>