以下问题是关于我正在 build 的网站。
当鼠标悬停在导航栏上的一个主要类别上时,会显示一组子类别(内部页面链接)。为此,我只需在我的 CSS 代码中使用 :hover 命令。问题是,当我的网站在触摸屏设备上查看时,我可以通过单击 :hover 元素(这是我想要的)来切换打开子类别,但我无法关闭子类别- 通过单击 :hover 元素来分类。在触摸屏设备 (Iphone 6s Plus) 上单击打开后,除非我刷新页面,否则它们将一直处于打开状态。
我的问题:有没有一种方法可以在非触摸屏设备上保持 :hover 功能,同时允许触摸屏用户关闭该元素通过点击它?
我知道如何编写 Javascript(使用 onclick)通过单击打开/关闭元素的显示,但如果我这样做,我将失去 :hover 功能。我想知道是否有一行代码会执行以下操作:当且仅当设备是触摸屏设备时才执行 onclick 函数。
最佳答案
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")
}
}
关于javascript - 将桌面上的悬停导航栏转换为触摸屏上的可点击导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37218564/