使用 jQuery 在触摸屏设备上模拟悬停答案

【问题标题】：Simulating Hover On Touch Screen Devices Using jQuery使用 jQuery 在触摸屏设备上模拟悬停
【发布时间】：2014-05-17 17:28:00
【问题描述】：

我有以下代码，当使用触摸屏设备时，它会在第二次点击时激活链接。

代码改编自：

hnldesign.nl

(函数($) {

var landingLink = '.nav-landing > li';

if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {

    // DISPLAY LANDING PAGE MEGA NAV ON TOUCH
    $(landingLink).live('touchstart', function (e) {

        var link = $(this);
        var megaDiv = $(this).find('div');

        // REMOVE touch-device CLASS IF NAV LINK HASN'T BEEN TAPPED
        if (!megaDiv.hasClass('touch-device')) {
            $('.touch-device').removeClass('touch-device');
        }

        if (link.hasClass('hover')) {
            // SECOND TOUCH
            return true;
        } else {
            // FIRST TOUCH
            link.addClass('hover');
            megaDiv.addClass('touch-device');
            $(landingLink).not(this).removeClass('hover');
            e.preventDefault();
            return false;
        }
    }); 
}

})(jQuery);

jsfiddle.net

我正在尝试对其进行设置，以便在点击（第一次点击）时，带有 .touch-device 类的 div 元素显示在链接旁边，但我在删除 .touch-device 类时遇到问题，如果另一个然后点击链接。我不知道如何定位 div 以删除类“触摸设备”。

可以在以下位置找到我的代码示例：

非常感谢您在解决此问题方面的帮助。

【问题讨论】：

不是最优化的，但为什么不只是 $('.touch-device').removeClass('touch-device'); 在将其添加到特定元素之前？？？
这看起来奏效了。感谢您的帮助！
几乎可以工作，但是当我点击触摸设备 div 中的链接时，它会关闭（删除触摸设备类）而不是打开页面链接。我已经更新了我的 jsfiddle 以在触摸设备 div 中显示一个链接

标签： jquery css

【解决方案1】：

只需从您的 html 代码中的整个标签中删除触摸设备类。在函数的第一行添加这一行：

$('.touch-device').removeClass('touch-device');

【讨论】：

几乎可以工作，但是当我点击触摸设备 div 中的链接时，它会关闭（删除触摸设备类）而不是打开页面链接。我已经更新了我的 jsfiddle 以在触摸设备 div 中显示一个链接。
我现在通过在 touch-device 类周围添加一个 if 语句解决了这个问题。（见上面更新的代码）