removeClass not working on iOS v2

Question

After creating this topic I thought the problem was solved, but for some reason it is not working on iPad.

What should it do

Jquery will toggleClass('active') when .menuButton is clicked. In CSS .active will have a display:block;. Jquery will also check for a click outside the div with $(document).on('click', function() { /* CODE */ }); and remove class active from navmenu so it will hide again.

Code Version 1

HTML5

<header>
  <div class="menuButton">
    Menu
  </div>
  <div class="navmenu">
    <ul>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 1</a></li>
    </ul>
  </div>
</header>

CSS3

.menuButton {
   display:block;
   cursor:pointer;
}
.navmenu {
   display:none;
}
.navmenu.active {
   display:block;
}

Jquery 2.2.1

$(document).ready(function() {
  var removeClassVar = true;
  $('.menuButton').on('click', function() {
     $('.navmenu').toggleClass('active');
     removeClassVar = false;
  });
  $('.navmenu').on('click', function() {
     removeClassVar = false;
  });
  $('html').on('click', function() {
     if (removeClassVar == true) {
        $('.navmenu').removeClass('active');
     }
     removeClassVar = true;
  });
});

JSFiddle

This code works perfectly on Windows (Chrome, IE, Edge, Firfox), Android 5.1, Android 6.0.1 and Android 4.4.2 (all tested with different browsers). When testing this with the iPhone 5S (iOS 8.4.1) in Safari and Chrome this will open the menu, but will not hide it. (Could not test on iPad or other versions).

Code Version 2

Same HTML5 and CSS3

Jquery 2.2.1

$(document).ready(function() {
  var $ua = navigator.userAgent;
  var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstart" : "click";

  $(document).on($event, function(ev) {
     if ($('.navmenu').hasClass('active')) {
       $('.navmenu').toggleClass('active');
     }
  });
  $('.menuButton').on('click', function(e) {
    e.stopPropagation();
    $('.navmenu').toggleClass('active');
  });
});

JSFidlle

This code works on Windows, Android and the iPhone, but yesterday I found out that on the iPad I borrowed (don't know which iOS version) this will open the menu, but you can not click on any links because the menu will close when you click on anything and will not redirect you to the page you want.

Changing on('click', function() to on('touchstart', function() will not change the situation.

Does anyone know how to fix this problem?

Code Version 3 After a lot of trying I found a way to .toggleClass('active') on menu button and added a close button which will .removeClass('active') on click. I only need to find a way to delete the class on body click.

Answer 1

Perhapes this works for you. In this case the menu only toggles if the clicked element is no link(a-Element).

$(document).on($event, function(ev) {
    if ( ev.target.nodeName != "A") {      
       $('.navmenu').removeClass('active');
    };
  });

  $('.menuButton').on('click', function(e) {
    e.stopPropagation();
    $('.navmenu').toggleClass('active');
  });

Fiddle

Answer 2

you can use below mentioned code, I think it'll help:

$(document).ready(function() {
    $(document).mousedown(function(e){
        if($(e.target).parents('.navmenu').length==1 || $(e.target).hasClass('navmenu')){
        }else if($(e.target).parents('.menuButton').length==1 || $(e.target).hasClass('menuButton')){
            $('.navmenu').toggleClass('active');
        }else{
            $('.navmenu').removeClass('active');
        }
    });
});