title: jquery toggleclass bug on iPhone
body: <p>The following code shows a menu called <code>#wrap-footer</code> by sliding it down when you click <code>#menu-button</code>. Clicking anywhere on the page except the menu makes it slide back up. </p>
  
  <p>When the menu is visible <code>#menu-button</code> has a class added to it called 'menu-open' (used for styling). When the menu is hidden again the class is removed. </p>
  
  <p>Note, I have used the selectors <code>#wrap-header</code>, <code>#wrap-pre-footer</code>, <code>#wrap-content</code> rather than just <code>html</code> or <code>document</code> as the iPhone does not recognize these. </p>
  
  <pre><code>$(document).ready(function(){
      $("#menu-button a").hide();
      $('#menu-button').append('Menu');
  
      $('#wrap-header,#wrap-pre-footer,#wrap-content').click(function() {
          $('#wrap-footer').slideUp('slow');
          $('#menu-button').removeClass('menu-open');
      });
  
      $('#menu-button').click(function(event){
         event.stopPropagation();
         $('#menu-button').toggleClass('menu-open');
         $('#wrap-footer').slideToggle('slow');
      });
  
      $("#wrap-footer").click(function(e) {
         e.stopPropagation();
      }); 
  });
  </code></pre>
  
  <p>On desktop browsers everything is fine. However on the iPhone the slideToggle works fine but the toggleClass never removes the class. So if the menu is open, clicking on the page (but not <code>#menu-button</code> or <code>#wrap-footer</code>) minimizes the menu and removes the class, but clicking <code>#menu-button</code> only minimizes the menu and does not remove the class. </p>
  
  <p>Thanks </p>