使用平板电脑的导航下拉菜单答案

【问题标题】：navigation drop downs using tablets使用平板电脑的导航下拉菜单
【发布时间】：2014-03-04 20:32:50
【问题描述】：

我正在开发一个网站，但我在使用平板电脑时遇到了导航下拉菜单的问题。我曾尝试通过非触摸事件使用 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 的修复程序，请在导航下拉菜单上点击两次 - 三下。先谢谢了！ :)

【问题讨论】：

这方面有什么帮助吗？

标签： css navigation responsive-design html-select

【解决方案1】：

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

edit: 更好的是检查 iOS 是否有奇怪的触摸 = :hover, touch again = :click 行为。还为 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();
    }
  });

检测安卓
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();
    }
  });

【讨论】：