Click to close jQuery dropdown menu on mobile devices while retaining other behavior
<p>I have a pretty simple jQuery dropdown menu with links in the usual ul/li list arrangement. The code for the dropdown is as follows:</p>

<pre><code>$('body').ready(function() {
      if(screen.width &lt;= 720) {
          $('.dropdown').hover(function() { $(this).find('.subMenu').toggle(); });
          $('.dropdown').click(function() { if( $('this').css('display') != 'none') {
              $('this').toggle();
              }
          });
      }
      else
      {
          $('.dropdown').hover(
              function() { $(this).stop(true,true).find('.subMenu').slideDown("fast"); },
              function() { $(this).stop(true,true).find('.subMenu').hide(); } 
          );
      }
  });
</code></pre>

<p>On mobile devices (ignore the 720 width, it's just for testing right now), I would like to achieve the following functionality:</p>

<ul>
<li><p>User taps link with a dropdown menu  >  If menu is open, close it</p></li>
<li><p>User taps link while another menu is already open  >  Close previous menu, open current menu</p></li>
<li>User taps somewhere else on the page  >  Close any open menus</li>
</ul>

<p>I found that the hover function actually handles #2 and #3, but I can't figure out how to get #1 working. I'm fairly certain that I know why this particular attempt</p>

<pre><code>$('.dropdown').click(function() { if( $('this').css('display') != 'none') {
      $('this').toggle();
      }
});
</code></pre>

<p>fails. I'm guessing that the click (or tap, in this case) triggers the hover event, which seems to take precedence and therefore displays the menu, instead of hiding it.</p>

<p>How can I get this working on mobile devices?</p>

<p>Edit: I'm using jQuery v1.7.2</p>

<p>HTML list structure is as follows, in case it helps someone (abridged version):</p>

<pre><code>    &lt;div id="navbar"&gt;
      &lt;ul&gt;
        &lt;li class="dropdown"&gt;&lt;a href="#"&gt;Link A&lt;/a&gt;&lt;/li&gt;
        &lt;li class="dropdown"&gt;&lt;a href="#"&gt;Link B&lt;/a&gt;
          &lt;ul class="subMenu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>
