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

Question

以下问题是关于我正在 build 的网站。

当鼠标悬停在导航栏上的一个主要类别上时，会显示一组子类别(内部页面链接)。为此，我只需在我的 CSS 代码中使用 :hover 命令。问题是，当我的网站在触摸屏设备上查看时，我可以通过单击 :hover 元素(这是我想要的)来切换打开子类别，但我无法关闭子类别- 通过单击 :hover 元素来分类。在触摸屏设备 (Iphone 6s Plus) 上单击打开后，除非我刷新页面，否则它们将一直处于打开状态。

我的问题:有没有一种方法可以在非触摸屏设备上保持 :hover 功能，同时允许触摸屏用户关闭该元素通过点击它？

我知道如何编写 Javascript(使用 onclick)通过单击打开/关闭元素的显示，但如果我这样做，我将失去 :hover 功能。我想知道是否有一行代码会执行以下操作:当且仅当设备是触摸屏设备时才执行 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")
}
}