將桌面上的可靠導航欄轉換爲觸摸屏上的可點擊導航欄

Question

以下問題與我正在構建的網站有關。

當鼠標懸停在其上時，導航欄上的一個主要類別顯示一組子類別（內部頁面鏈接）。要實現這一點，我只需在我的CSS代碼中使用：hover命令。問題是，當我的網站在觸摸屏設備上查看時，我可以通過單擊：hover元素（這是我想要的）來切換打開子類別，但我無法關閉子點擊：懸停元素。一旦在觸摸屏設備（Iphone 6s Plus）上單擊打開它們，除非我刷新頁面，否則它們會被卡住。

我的問題：有沒有我可以保持方式：非觸摸屏設備懸停功能，同時允許觸摸屏用戶可以通過點擊它來切換這個元素？

我知道如何編寫Javascript（使用onclick）通過點擊切換顯示元素的開/關，但如果我這樣做，那麼我失去了我的：懸停能力。我想知道是否有一行代碼可以執行以下操作：當且僅當設備是觸摸屏設備時，纔會執行onclick函數。

Answer 1

You can use the following code to distinguish devices. Add you hover css with touch-enable. 

detectTouchEvent: function(){ 
jQuery.support.touch = 'ontouchend' in document; 
var $body = $("body"); 

if(jQuery.support.touch){ 
$body.addClass("touch-enable"); 
}else{ 
$body.addClass("touch-disabled") 
} 
}