在触摸时切换，仅在单击时显示

Toggle on touch and only show on click

本文关键字：显示 单击 触摸      更新时间：2023-09-26

有一个图像和另一个div。

<img src="clock.jpg" id="date"/>
<div id="toggleDIV"> toggleDIV </div>

如何使#toggleDIV'在每次单击按钮时显示，但在触摸时切换视图？所以在触摸设备上，我希望按钮作为on/OFF按钮工作，但在非触摸设备上我希望它只作为on工作。

$("#date").click(function(){
  if ($('#toggleDIV').css('display')=='none')
    $('#toggleDIV').fadeIn();
});

试试这样的东西：

$("#date").click(function(){
    $('#toggleDIV:hidden').fadeIn();
});
$("#date").on("touchstart", function(){
    $("#date").off("click");
    $('#toggleDIV').fadeToggle();
});

工作原理：当您单击按钮时，div将始终显示，但当您触摸按钮时，将从按钮中删除click事件处理程序，它将运行touch处理程序。

JSFiddle

注意：请参阅@Rory的评论，为什么不使用浏览器嗅探。

相关文章：