Раскрывающиеся списки навигации с использованием планшетов

Question

Я работаю над веб-сайтом, и у меня проблема с выпадающими списками навигации с помощью планшетов. Я пытался использовать Modernizr, используя события без касания, и мне не повезло.

Проблема в том, что на планшетах Android при нажатии на раскрывающиеся списки навигации загружается родительская страница, а не удерживается раскрывающийся список. Я наткнулся на это исправление http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly и оно устранило проблему на планшетах Android, но вызвало два-три нажатия, используя планшеты iOs для навигации.

Код, который исправил проблему Android:

<script>
/*
AUTHOR: Osvaldas Valutis, www.osvaldas.info
*/
;(function( $, window, document, undefined )
{
$.fn.doubleTapToGo = function( params )
{
    if( !( 'ontouchstart' in window ) &&
        !navigator.msMaxTouchPoints &&
        !navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;

    this.each( function()
    {
        var curItem = false;

        $( this ).on( 'click', function( e )
        {
            var item = $( this );
            if( item[ 0 ] != curItem[ 0 ] )
            {
                e.preventDefault();
                curItem = item;
            }
        });

        $( document ).on( 'click touchstart MSPointerDown', function( e )
        {
            var resetItem = true,
                parents   = $( e.target ).parents();

            for( var i = 0; i < parents.length; i++ )
                if( parents[ i ] == curItem[ 0 ] )
                    resetItem = false;

            if( resetItem )
                curItem = false;
        });
    });
    return this;
};
})( jQuery, window, document );</script>

And this: <script>
$( function() { $( '#second-menu li:has(ul)' ).doubleTapToGo(); }); </script>

Веб-сайт, над которым я работаю, www.bpcdev.co.uk для вашей проверки. Пожалуйста, не могли бы вы сообщить мне, есть ли еще какие-либо исправления для iOS, два-три нажатия на раскрывающиеся списки навигации. Заранее спасибо!:)

Answer 1

Вы можете обнаружить Android и добавить doubletaptogo() только тогда, когда это Android.

изменить: лучше проверить для iOS, которая делает нечетное прикосновение =: при наведении, коснитесь снова =: поведение при нажатии. Также добавил aria-haspopup атрибут для окон (см. конец страницы по адресу http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly)

---

Определить iOS
Определить, является ли устройство iOS

  $(function () {
    var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
    if( ! iOS) {
        $( '#nav li:has(ul)' ).attr('aria-haspopup','true').doubleTapToGo();
    }
  });

---

Обнаружить Android
Обнаружение телефона Android через Javascript / JQuery
(ps. это больше не добавит doubletaptogo на Windows Mobile)

  $(function () {
    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
    if(isAndroid) {
        $( '#nav li:has(ul)' ).doubleTapToGo();
    }
  });