I have an element on my page that is toggled on and off by clicking on a text link. I also need the element to hide when a user clicks ANYWHERE on the page outside of the element itself - this is my jQuery code - can someone please show me what modifications to make to do what I need?

$(function() {
$("#header-translate ul li").click(function() {
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500); 
});
});

I have an element on my page that is toggled on and off by clicking on a text link. I also need the element to hide when a user clicks ANYWHERE on the page outside of the element itself - this is my jQuery code - can someone please show me what modifications to make to do what I need?

$(function() {
$("#header-translate ul li").click(function() {
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500); 
});
});

• javascript
• jquery
• toggle

6 Answers 6

Using jQuery's one function is perfect for this.

$(function() {
    $("#header-translate ul li").click(function(e) {
        e.preventDefault();
        var $toClose = $("#header-translate li ul")
        $toClose.slideToggle(500, function() {
            if($toClose.is(':visible')) {
                $('body').one('click', function(e) {
                    e.preventDefault();
                    $toClose.slideUp(500);
                });
            }
            else {
                $('body').unbind('click');
            }
        });
    });
});

What this will do is assure that this click handler will only get executed once, and only when the element is shown.

I believe you need to add a click() handler to the $('body'), and also event.stopPropagation() to your element.

$(function() { 
  $("#header-translate ul li").click(function(e) {   // don't forget that 'e'
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500);  
    e.stopPropagation(); // so this doesn't register as a body click
  });
  $("body").click(function(e) {
    $("#header-translate").hide();
  }); 
}); 

You'll want to check if

$(function()
{
    var elToHideSelector = "#header-translate li ul";

    $("body").click(function(e)
    {
        if ( ! $(e.target).is(elToHideSelector + ',' + elToHideSelector + ' *') )
        {
            $(elToHideSelector).hide();
        }
    });
});

I've used this code:

    $(function() { 
  $("#header-translate ul li").click(function(e) {     
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500);  
    e.stopPropagation(); // so this doesn't register as a body click
  });
  $("body").click(function(e) {
      if ($('#header-translate li ul').is(':visible')) { $("#header-translate li ul").hide("slide", { direction: "up" }, 500);}
  }); 
}); 

Add a click handler to BODY tag that will slide the element up and add event.stopPropagation() to the element that opens the element in the first place so the click to open is not send to BODY.

You can add a listener to the document (since the event bubbles up, you can capture it in a parent element)

$(function() {
    $("#header-translate ul li").click(function() {
        $("#header-translate li ul").toggle("slide", { direction: "up" }, 500); 
        $(document).one('click', function(){  
            $("#header-translate li ul").hide();
        });
    });
});