0

我在一个网站上工作，但使用平板电脑的导航下拉菜单有问题。我曾尝试使用 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 的修复程序 - 导航下拉菜单上的三个水龙头 - 请告诉我。先谢谢了！:)

4

1 回答 1

0

只有当它是 android 时，您才能检测到 android 并添加 doubletaptogo()。

编辑：更好的是检查 iOS 是否有奇怪的触摸 = :hover, touch again = :click 行为。还添加了aria-haspopupwindows 的属性（参见页面末尾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
通过 Javascript / jQuery 检测 Android 手机
（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();
    }
  });
于 2014-03-04T12:23:11.107 回答