Question

The following code shows a menu called #wrap-footer by sliding it down when you click #menu-button. Clicking anywhere on the page except the menu makes it slide back up.

When the menu is visible #menu-button has a class added to it called ‘menu-open’ (used for styling). When the menu is hidden again the class is removed.

Note, I have used the selectors #wrap-header, #wrap-pre-footer, #wrap-content rather than just html or document as the iPhone does not recognize these.

$(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();
    }); 
});

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 #menu-button or #wrap-footer) minimizes the menu and removes the class, but clicking #menu-button only minimizes the menu and does not remove the class.

Thanks

Answer 1

Turns out the js was fine. The real problem was the css hover class. On an iPhone the last element you click on persists as a hover state. Removing the css hover class (not needed for my mobile site version) fixed this.