Javascript 模拟触摸屏的CSS hover:before和hover:after行为工具提示

我有一个非常好的CSS专用悬停工具提示解决方案，如下所示：

在非触摸屏上效果很好，但在触摸屏上，点击会显示提示，而且不会隐藏。我试图得到一个切换解决方案，它保留了我所做的工作，并添加了一个触摸屏jQuery或CSS解决方案来显示和隐藏工具提示。我希望单击时显示/隐藏切换，但使用delay（）的解决方案也可以

我读过

这是当前的代码

JS今天添加了解决触摸屏问题的方法：

$('.tooltip').click(function() {
    $(this).addClass('tooltipBefore tooltipAfter').delay( 800 ).removeClass('tooltipBefore tooltipAfter');
});

HTML

编辑2 根据@maioman对以下问题的回答修改JS。控制台日志i验证

$（this）

是否选择了正确的元素，但在Chrome inspector中，类闪烁，但从未被addClass或removeClass修改。还尝试切换类，但未添加类。 结束编辑2

console.log($(this).attr("Title"));
$(this).addClass('tooltipBefore').addClass('tooltipAfter').delay( 3000 ).removeClass('tooltipBefore').removeClass('tooltipAfter');

编辑3 好的，所以edit#2在如何调用addClass和removeClass方面存在问题。此版本可在浏览器中使用，但可正确切换类别，但在手机上仍不起作用：

$('.tooltip').bind( "click touchstart", function() {
    $(this).toggleClass('tooltipBefore tooltipAfter');
});

结束编辑3

尝试更改此选项

 $('.tooltip').click( function () {

到

---

那么延迟选项不起作用了？谢谢你的回复。我正在获取未捕获的类型错误：$（…）。on不是函数。该函数是否更改为delegate（）或类似的东西…Ah-on（）使用

$（'.tooltip'）替换了bind（）和delegate（）{

获得与以前相同的结果-工具提示显示但从不隐藏。请查看此内容，谢谢您的帮助。上面添加了编辑。addClass和toggleClass在桌面上的Chrome inspector中添加时无法修改元素

$('.tooltip').bind( "click touchstart", function() {
    $(this).toggleClass('tooltipBefore tooltipAfter');
});

 $('.tooltip').click( function () {

 $('.tooltip').on('click touchstart', function () {