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的奇怪触摸=：悬停，再次触摸=：点击行为。还为Windows添加了aria-haspopup属性（请参阅http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly的结尾处）

检测iOS
Detect if device is iOS

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

检测Android
Detect Android phone via Javascript / jQuery
（ps。这将不再在Windows Mobile上添加doubletaptogo）

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

导航使用平板电脑下降

1 个答案: