removeClass iOS v2 üzerinde çalışmıyor

Question

this konusunu açtıktan sonra, sorunun çözüldüğünü düşünüyordum, ancak bazı nedenlerden dolayı iPad üzerinde çalışmıyor. o

jQuery yapması gerekenler

toggleClass('active').menuButton tıklandığında ne zaman. CSS .active'da display:block; olacaktır. Jquery ayrıca $(document).on('click', function() { /* CODE */ }); ile div dışında bir tıklama olup olmadığını kontrol edecek ve sınıfını navmenu'dan kaldırarak tekrar saklanacaktır.

Kod Versiyon 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

Bu kod Windows (Krom, IE, Kenar, Firfox), Android 5.1, Android 6.0.1 ve Android 4.4.2 üzerinde mükemmel çalışıyor(tüm farklı tarayıcılar ile test). Bunu Safari ve Chrome'da iPhone 5S (iOS 8.4.1) ile test ederken, bu menü açılır, ancak gizlenmez. (IPad veya diğer sürümlerde test edilemedi).

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

Bu kod, Windows, Android ve iPhone üzerinde çalışır

JSFidlle

Kod Versiyon 2

aynı HTML5 ve CSS3

jQuery 2.2.1

, ama dün öğrendim ki iPad'de ödünç aldım (d hangi iOS sürümünü bilmiyorsanız) bu menü açılır, ancak herhangi bir linke tıklayamazsınız çünkü herhangi bir şeyi tıkladığınızda menü kapanacak ve istediğiniz sayfaya yönlendirilmeyecektir.

on('click', function() öğesinin on('touchstart', function() olarak değiştirilmesi durumu değiştirmeyecektir.

Bu sorunun nasıl giderileceğini bilen var mı? I çalışırken bir sürü menü düğmesine .toggleClass('active') bir yolunu bulmuş ve bir kapatma düğmesi eklenmiş ardından Kod Versiyon 3

hangi tıklamada olacak .removeClass('active'). Sadece sınıfı body tıklatarak silmek için bir yol bulmalıyım.

Answer 1

Perhapes bunun sizin için işe yarıyor. Bu durumda menü yalnızca tıklanan elemanın bir bağlantı olmaması durumunda değişir (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

aşağıda kullanabilirsiniz kodunu söz edebilir, ben yardımcı olacağız düşünüyorum: Ben bu kullanırken, aracın menü gösterilecektir tıklayın nerede

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