Javascript 当用户再次点击时，如何隐藏手机上的项目？

我有这个样品

.container btn工具提示：悬停。工具提示内容{
显示：块；
}
.工具提示内容{
背景：黑色；
颜色：白色；
显示：无；
最大宽度：360px；
最小宽度：210px；
填充物：5px10px；
z指数：100；
文本对齐：居中；
颜色：#00；
边缘顶部：8px；
}

打开工具提示
Lorem ipsum dolor sit amet，献祭精英

使用javascript和jquery的可能解决方案：

$(document).on('click', 'button.open', function() { if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { $(this).removeClass('open').addClass('close').html('Close Tooltip'); $('.tooltip-content').show(); }; }); $(document).on('click', 'button.close', function() { if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { $(this).removeClass('close').addClass('open').html('Open Tooltip'); $('.tooltip-content').hide(); }; }); $（文档）.on（'click'，'button.open'，function（））{ if（/Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini/i.test（navigator.userAgent））{ $（this）.removeClass（'open'）.addClass（'close'）.html（'close Tooltip'）； $（'.tooltip content'）.show（）； }; }); $（文档）.on（'click'，'button.close'，function（）{ if（/Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini/i.test（navigator.userAgent））{ $（this）.removeClass（'close'）.addClass（'open'）.html（'open Tooltip'）； $（'.tooltip content'）.hide（）； }; }); 虽然@已经写了一个（有点）有效的答案，但我的方法有点不同，我的代码也不同

我不喜欢使用用户代理嗅探。为什么已经讨论了堆栈溢出（）：

用户代理嗅探是一种非常复杂的检测技术，用户代理字符串是一个不断移动的目标，不应该单独信任它们。这个职位的人应该考虑更多的研究。

从用户代理中嗅探特定设备的问题之一是，当新设备出现时，您必须记住更新检测。这不是一个理想的解决方案

android上的Dolphin浏览器不会发送任何这些字符串

带有触摸功能的笔记本电脑也存在问题。我自己也有一个Surface，你的方法对我不起作用，因为我的用户代理将是Windows，即使我正在使用触摸屏

我想我的观点很清楚

---

那么还有什么其他方法呢？ 你可以试着检测触摸屏。这是一个有问题的解决方案，但没有用户代理嗅探那么多，因为您还可以包括笔记本电脑。它也在线程中进行了讨论

使用媒体查询也不是一个好方法（尽管是最干净的），因为使用笔记本电脑仍然会遇到麻烦

目前看起来不太好，是吗？

你应该考虑一下你需要什么或不需要什么。通常，最佳做法是不根据设备添加或删除特定功能。你应该问问自己，是否真的有必要在第二次点击时关闭它。为什么不按一下关闭按钮并删除桌面和移动设备的悬停功能，如下所示：

$（“.open，.close按钮”）。单击（函数（）{
$（“.tooltip内容”）.toggle（）；
开关（$（“.tooltip内容”）。为（“：可见”））{
大小写正确：
$（“.open”）.text（“关闭工具提示”）；
打破
案例错误：
$（“.open”）.text（“打开工具提示”）；
打破
}
});
。工具提示内容{
背景：黑色；
颜色：白色；
显示：无；
最大宽度：360px；
最小宽度：210px；
填充物：5px10px；
z指数：100；
文本对齐：居中；
边缘顶部：8px；
位置：相对位置；
}
.关闭按钮{
位置：绝对位置；
颜色：白色；
排名：0；
右：10px；
光标：指针；
}

打开工具提示
Lorem ipsum dolor sit amet，献祭精英

x接近
在桌面版上应该发生什么？因为你的方法似乎太复杂了。在大多数情况下，只为移动设备编写自定义代码是一种变通方法，应该避免。在桌面版本上，它仍然是现在的样子。没有任何更改首先，在我看来，用户代理嗅探不是一个好主意，因为字符串可以更改。根据我的经验，这是不可靠的（尽管我承认我已经很久没有和他们合作了）。其次，这段代码设计不好，应该重新编写。将同一代码复制多次是一种非常糟糕的设计代码。如果用户在外部单击，该项目将不会关闭