Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jquery clickoutside event

jquery clickoutside event

10:44 am on Mar 25, 2012 (gmt 0)

5+ Year Member


i need someone help me on the jquery event how to closed if i clicked outside the page.

$(function() {
// hide all the sub-menus

// add a link nudging animation effect to each link
$("#jQ-menu a, #jQ-menu span.toggle").hover(function() {
$(this).stop().animate( {
}, 300);
}, function() {
$(this).stop().animate( {
}, 300);

// set the cursor of the toggling span elements
$("span.toggle").css("cursor", "pointer");

// prepend a plus sign to signify that the sub-menus aren't expanded
$("span.toggle").prepend("+ ");

// add a click function that toggles the sub-menu when the corresponding
// span element is clicked
$("span.toggle").click(function() {

// switch the plus to a minus sign or vice-versa
var v = $(this).html().substring( 0, 1 );
if ( v == "+" )
$(this).html( "-" + $(this).html().substring( 1 ) );
else if ( v == "-" )
$(this).html( "+" + $(this).html().substring( 1 ) );
11:22 pm on Mar 26, 2012 (gmt 0)

5+ Year Member

Can someone help me to how to create event clickoutside that close the menu if it's open ? Anyone?
11:05 am on Apr 1, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

you hook the top html for the click event to close the menu
$('html').click(function(e) {
// Add conditionals and close menu here

and you prevent any event propagation of the menu container to the parent handlers so they're not notified since you handle clicks inside the menu container (so the previous code - above won't be informed to close whatever you need to close.
$('#menu').click(function(e) {
11:45 am on Apr 1, 2012 (gmt 0)

5+ Year Member

hi enigma1,

Can you show me how cos im a bit blur on this topic.Care to show me the complete work on this issue.

1:21 pm on Apr 1, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Here is a complete document so you can test it. Just setup the jquery link to be valid and play around with it to see what I mean.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('html').click(function() {
alert('Click outside menu container');
$('#menu').click(function(e) {
alert('Stopped propagation');
return false;
<div id="menu" style="width: 100px; height: 100px; background: #F00; text-align: center;">Menu Area</div>

You can see the alerts coming up depending where you click.

Featured Threads

Hot Threads This Week

Hot Threads This Month