jquery toggleclass bug on iPhone
-
26-10-2019 - |
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
Solution
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.