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

0

У меня проблемы с событием JQuery click на Mobile. Я искал 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;
}
Теги:
mobile

3 ответа

0
Лучший ответ

Простое исправление заключается в добавлении свойства CSS:

cursor: pointer;
0

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

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

//Делегирование соответствующего события

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

Попробуйте вместо.on() вместо события click().

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

$(".btn-navbar-responsive").on('click', function() {
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible");
});
  • 0
    К сожалению, это все еще не работает. Он отлично работает на рабочем столе, но не на мобильном Safari.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню