javascript - Close Element when clicking anywhere on page - Stack Overflow

admin管理员组

文章数量:1356716

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

Share Improve this question Follow edited Sep 2, 2011 at 13:58 Reporter 3,93655 gold badges3535 silver badges4949 bronze badges asked Sep 2, 2011 at 13:49 Zach NicodemousZach Nicodemous 9,50799 gold badges4949 silver badges7272 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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();
        });
    });
});

本文标签： javascriptClose Element when clicking anywhere on pageStack Overflow