将桌面上的可悬停导航栏转换为触摸屏上的可单击导航栏

Question

以下问题涉及我正在建设的网站。

当鼠标悬停在导航栏上时，导航栏上的一个主要类别会显示一组子类别（内部页面链接）。为此，我只需在CSS代码中使用：hover 命令。问题是，当我的网站在触摸屏设备上查看时，我可以通过点击：悬停元素（这是我想要的）切换打开子类别，但我无法切换子 - 单击：hover 元素的类别。一旦在触摸屏设备（Iphone 6s Plus）上单击它们，它们就会被打开，除非我刷新页面。

我的问题：我是否可以在非触摸屏设备上维护：hover 功能，同时允许触摸屏用户切换元素点击它？

我知道如何编写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")
}
}