removeClassがiOS v2で動作しない

Question

thisトピックを作成した後、問題は解決したと考えられましたが、何らかの理由でそれがiPadで動作していないと考えました。それは

のjQueryを何をすべき

はtoggleClass('active').menuButtonがクリックされたときになります。 CSS .activeにはdisplay:block;が入ります。 Jqueryはまた、$(document).on('click', function() { /* CODE */ });とdivの外側のクリックをチェックし、activeをnavmenuから削除するので、再び非表示になります。

コードバージョン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

このコードは、Windows上で完璧に動作します（クローム、IE、エッジ、Firfox）、5.1アンドロイド、アンドロイド6.0.1とAndroid 4.4.2（すべての異なるブラウザでテスト）。 SafariとChromeのiPhone 5S（iOS 8.4.1）でこれをテストすると、メニューが開きますが、隠すことはありません。 （iPadや他のバージョンではテストできませんでした）。

コードバージョン2

同じHTML5と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

このコードは、Windows、AndroidとiPhone上で動作し、しかし昨日、私はiPadでそれを借りたことを知った（dどのiOSバージョンであるかわからない）これはメニューを開きますが、何かをクリックするとメニューが閉じて、あなたが望むページにリダイレクトされないため、リンクをクリックすることはできません。

on('click', function()からon('touchstart', function()に変更しても状況は変わりません。

誰でもこの問題を解決する方法を知っていますか？ Iを試みるの多くは、メニューボタンを.toggleClass('active')への道を発見し、閉じるボタンを追加した後、コードバージョン3

そのクリックになります.removeClass('active')。私はbodyをクリックしてクラスを削除する方法を見つける必要があります。

Answer 1

これはあなたのための作品です。この場合、クリックされた要素がリンクなし（a要素）である場合にのみ、メニューはトグルします。あなたは以下を使用することができます

$(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

コードを言及し、私はそれが役立つと思う：

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