homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

jquery clickoutside event
jquery clickoutside event

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


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)

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)

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)

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)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved