jQuery Click Event на мобильном телефоне

Question

У меня проблемы с событием JQuery click на мобильном устройстве. Я искал SO для ответов и нашел противоречивые советы о событии click, работающем в мобильных браузерах, таких как Safari/Chrome.

Ниже мое перо, это фрагмент гораздо более крупного проекта. Это то, что я бросил вместе за 5 минут для цели этого поста.

JS выполняется, и класс CSS переключается на настольных браузерах, но не на всех мобильных устройствах. Что мне не хватает?

http://codepen.io/anon/pen/FknId

Спасибо!

HTML

<a href="#" class="btn-navbar-responsive">Menu</a> 
<ul class="navbar-menu navbar-hidden"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 1</a></li> 
</ul> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

JS

$(".btn-navbar-responsive").click(function() { 
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible"); 
}); 

CSS

.btn-navbar-responsive { 
    padding: 15px 20px; 
    color: white; 
    text-decoration: none; 
    font-size: 16px; 
    font-family: "Helvetica"; 
    background-color: #50D78B; 
} 


.navbar-visible { 
    -webkit-transition: opacity, ease-in, 350ms; 
    -moz-transition: opacity, ease-in, 350ms; 
    -ms-transition: opacity, ease-in, 350ms; 
    transition: opacity, ease-in, 350ms; 
    -webkit-transition: top, ease-in, 350ms; 
    -moz-transition: top, ease-in, 350ms; 
    ms-transition: top, ease-in, 350ms; 
    transition: top, ease-in, 350ms; 
    top: 10px; 
    opacity: 1; 
    position: relative; 
    z-index: 999; 
} 

.navbar-hidden { 
    -webkit-transition: opacity, ease-in, 350ms; 
    -moz-transition: opacity, ease-in, 350ms; 
    -ms-transition: opacity, ease-in, 350ms; 
    transition: opacity, ease-in, 350ms; 
    -webkit-transition: top, ease-in, 350ms; 
    -moz-transition: top, ease-in, 350ms; 
    -ms-transition: top, ease-in, 350ms; 
    transition: top, ease-in, 350ms; 
    top: 0px; 
    opacity: 0; 
    position: relative; 
    z-index: 999; 
} 

Answer 1

Простым решением является добавление свойства CSS :

cursor: pointer; 

Answer 2

Попробуйте .он() вместо этого события мыши().

http://api.jquery.com/on/

$(".btn-navbar-responsive").on('click', function() { 
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible"); 
}); 

Answer 3

Вы можете попробовать делегирование событий с обнаружением сенсорного события, как этот // обнаружения прикосновения поддерживается или не

var event= ('ontouchstart' in document.documentElement) ? "touchstart" : "click"; 

// Делегат надлежащее событие

$(".btn-navbar-responsive").on(event, function() { 
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible"); 
});