基於觸摸設備的下拉菜單

Question

我在我的網站上有這個導航欄，它不會在我的iPod touch上下拉，我懷疑iPhones和iPad也是如此。 This is one of the pages

我想知道是否有任何快速修復來啓用觸摸/懸停。

CSS

Answer 1

如果你有興趣的iDevices，那麼你可以使用這一招：

#nav ul { 
display: none; 
/* Your styles */ 
} 
#nav > li:hover ul { 
display: block; 
} 
/* This is important */ 
#nav > li > a:hover { 
color: #fff; /* You can set the same color or add other style.*/ 
} 

如果一個元素的:hover事件，則第一次輕觸的iOS呈現:hover第二接頭引發Click事件。

這應該工作。

P.S.最好爲移動設備，觸摸和桌面製作不同的UI邏輯。

Answer 2

有一個關於一個很好的文章在這裏 - http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

我建議使用Modernizr因爲它提供了你可以使用觸摸屏設備無觸摸CSS類，或者您可以使用JavaScript檢測懸停並向您的元素添加一個類。

if (!("ontouchstart" in document.documentElement)) { 
    document.documentElement.className += " no-touch"; 
} 

Answer 3

最優雅的解決方案我已經遇到是Osvaldas Valutis

他的方法是一個非常微小的jQuery插件檢測與下拉菜單UL導航列表項目的觸摸事件。

例如，您可能您的導航標記是這樣的：

<nav id="nav-primary"> 
    <ul> 
     <li><a href="/">Home</a></li> 
     <li><a href="/about/">About</a> 
      <ul> 
       <li><a href="/about/index.html">Dropdown item 1</a></li> 
       <li><a href="/about/page.html">Dropdown item 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

你再調用插件使用jQuery的一行，像這樣：

$('#nav-primary li:has(ul)').doubleTapToGo(); 

這保證了首頁鏈接在上面的例子中仍然按預期工作，因爲它沒有下拉菜單。唯一的（非常小的）缺點是在下拉列表中的第一個鏈接上有一點冗餘，但這並沒有什麼影響。