Выпадающие меню CSS на адаптивном сайте вызывают проблемы на мобильных телефонах

Question

Мне было поручено взять сайт, использующий раскрывающиеся меню CSS, и сделать его адаптивным. Поскольку мобильные телефоны не имеют событий при наведении, я использую Modernizr для добавления классов в меню, чтобы показать / скрыть их. Это отлично работает. Проблема в том, что прикосновение к родительскому элементу все еще приводит к тому, что телефон переходит к родительскому элементу, поэтому, если вы не работаете очень быстро, вы не можете нажимать на подпункты, которые появляются в меню. Возврат false и предотвращение дефолта, оба работают на моем симуляторе iphone, но не работают на реальных устройствах (android и iphone).

//make sure main nav links don't take you anywhere on mobile

$('#a-popular-main-nav').on('touchend', function(event) {
    event.preventDefault();
    return false;
});

$('#a-profile-main-nav').on('touchend', function(event) {
    event.preventDefault();
    return false;
});


if (Modernizr.touch) {
    $('.menu').each(function () {
        var $lis = $(this).find('li');
        $lis.on('touchend', function(event) {

            var $this = $(this);
            if ($this.hasClass('activated')) {
                $this.removeClass('activated');
            }
            else {
                $lis.removeClass('activated');
                $this.addClass('activated');
            }
            event.stopPropagation();

       });

        //close menus if touched outside the menu
       $('body').on('touchend', function() {
               $lis.removeClass('activated');
       });


    });

};

Я пробовал каждую комбинацию stopPropagation, protectDefault и return false. Кто-нибудь сталкивался с этим раньше?

Answer 1

Таким образом, ответ лежит в первом бите кода.Беда в том, что это кассовое событие.Значение по умолчанию, которое я пытаюсь предотвратить, на самом деле относится к событию click, так что вот как я изменил код.Довольно легко исправить.

$('#a-popular-main-nav').on('click', function(event) {
    event.preventDefault();
});

$('#a-profile-main-nav').on('click', function(event) {
    event.preventDefault();
});

Answer 2

В последнее время я смотрю на выпадающее меню css. Это выпадающее меню работает нормально на моем iPhone: http://matthewjamestaylor.com/blog/centered-dropdown-menus#

Но нужно немного поработать над стилем и исправить ошибку (список, кажется, движется, когда вы "зависаете" / нажимаете на определенную кнопку Удачи.

Answer 3

Я сделал довольно много адаптивного дизайна и нашел лучшее решение в этом методе Криса Койера - иметь меню выбора для мобильных устройств. Таким образом, вы можете воспользоваться преимуществами собственной обработки меню выбора в каждом телефоне, которая в большинстве случаев будет работать намного лучше (и, что более важно, предсказуемо ), чем любые хаки jQuery.

http://css -tricks.com / преобразование-меню-выпадающего меню /

Надеюсь, что поможет