WordPress的基礎子不是在iPad上

Question

顯示我還是新的移動/液體/響應的遊戲，與本網站上的子菜單是有問題：自動地懸停功能：http://www.medowsconstruction.com/

在移動設備上點擊應更換對？標準基金會主題似乎就是這種情況。

我沒有改變框架的這些移動特定領域的任何東西，所以我做了什麼來弄亂它並導致子菜單不能在iPad/touch上顯示？

感謝您的幫助

Answer 1

看來，問題是，這是不是一個標準的純CSS下拉菜單，正如人們所承擔的風險。相反，它已被jQuery控制。你可以看到它在app.js文件：

$('.nav-bar>li.has-flyout').hover(function() { 
     $(this).children('.flyout').show(); 
    }, function() { 
     $(this).children('.flyout').hide(); 
    }); 

所以，你應該修改腳本，以便與觸摸選定設備的工作（有關於該主題here了很好的討論）。我在這裏使用一個簡單的聲明。我一直無法測試它的iPad，但如果您嘗試使用類似你可以有很好的效果（未經測試！）：

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { 
$('.nav-bar>li.has-flyout').bind('touch', function() { 
     $(this).children('.flyout').slideToggle(); 
    }); 
} else { 

$('.nav-bar>li.has-flyout').hover(function() { 
      $(this).children('.flyout').show(); 
     }, function() { 
      $(this).children('.flyout').hide(); 
     }); 
} 

這應該給你如何處理一些線索。讓我們知道它是否有效。

這個stackoverflow discussion about hover and touch devices也有很多信息。

Answer 2

感謝@hernan讓我在正確的方向與事情。

我最終通過將基礎代碼與他的代碼與一些更好的選擇器混合來修復它。這裏就是我降落：

if (navigator.userAgent.match(Modernizr.touch || navigator.userAgent.match(/Windows Phone/i))) { 
    $('.nav-bar>li.has-flyout').on('click.fndtn touchstart.fndtn', function(e) { 
     e.preventDefault(); 
     var flyout = $(this).children('.flyout').first(); 
     if (lockNavBar === false) { 
      $('.nav-bar .flyout').not(flyout).slideUp(500); 
       flyout.slideToggle(500, function(){ 
       lockNavBar = false; 
      }); 
     } 
     else 
     { 
      flyout.slideToggle(500); 
     } 
    }); 

i'l一定會檢查到你所提到的這兩條鏈路/討論過，埃爾南。

再次感謝 -