I manage a private website that has a normal desktop version and also an iPhone version. Both versions use jQuery. I'm wondering if I could get some help with the iPhone version.
Right now, I have one of the navigation items set up so that when it's tapped on, a submenu with more navigation items appear. This is much like the "more" menu at the iPhone version of http://www.google.com/. The problem I'm having is that once that submenu is shown, the only way to make it disappear again is to tap on one of its items. I'd like to be able to tap anywhere outside of the submenu to make it disappear. This is how the iPhone version of http://www.google.com/ behaves, so I know it's possible.
The only way I can think of accomplishing this is to add a click event to the body that calls a function that removes the submenu. However, I can't get it to work. At the bottom of this post you will find code that illustrates this problem. I would really appreciate any help. Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Safari Mobile Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
border: 1px solid red;
<h1>Safari Mobile Test</h1>
<p><a href="#">This link doesn't go anywhere. If you click it, you will get an alert indicating that the link was clicked and a separate alert indicating that the body was clicked.</a></p>
<p>In a normal web browser, clicking anywhere within the body of this page (which is surrounded by a red border) will trigger an alert indicating that the body was clicked. However, the only way to see the alert using Safari Mobile is to click on the above link.</p>
alert('The body was clicked!');
alert('The link was clicked!');