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

Question

下面的问题是关于我正在构建的网站。

当鼠标悬停在导航栏上时，导航栏上的一个主要类别会显示一组子类别（内部页面链接）。为了实现这一点，我只需在CSS代码中使用:hover命令。问题是，当我的网站在触摸屏设备上查看时，我可以通过单击：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-disable.   
detectTouchEvent: function(){
jQuery.support.touch = 'ontouchend' in document;
var $body = $("body");
if(jQuery.support.touch){
$body.addClass("touch-enable");
}else{
$body.addClass("touch-disabled")
}
}