Question

如果您曾经在iPad上使用过StackOverflow，您可能已经注意到，为了删除评论，您：

首先点按评论字段
该字段以灰色突出显示，删除图标以灰色显示
然后您可以点按该图标以删除评论

在桌面上，此过程更简单，因为鼠标可以将鼠标悬停在评论上，隐藏并通过jQuery mouseenter在mouseleave和.css上显示图标。

我已经在我的博客上设置了一个帖子和评论系统，其功能与在桌面上运行的SO非常相似，但我想知道如何实现SO的iPad功能。

任何想法如何使单击作为悬停在评论上？

Answer 1

每当我在jQuery或Mootools中编写任何响应mouseenter的内容时，iPad立即将此行为转换为单击。这包括通常只需单击一次就可以将您带到另一个页面的链接。这不是你看到的行为吗？

Answer 2

使用jQuery你可以写一个点击事件：

$(".comment").click(function(e){
    e.preventDefault();
    $(this).toggleClass("clicked");
});

并创建一些iPad-only CSS，如下所示：

.comment .delete
{
    display: none;
}

.comment.clicked .delete
{
    display: inline;
}

如果你的html是这样的话会起作用：

<div class="comment">... <a class="delete">Delete</a></div>

并将这些文件连接到他们自己的ipad.css和ipad.js文件中，并将它们包含在<head>

中

<!--[if iPad]>
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" />
<script type="text/javascript" src="ipad.js"></script>
<![endif]-->

工作示例：http://jsfiddle.net/hunter/pqLXS/

在iPad上使用单击轻击“悬停”效果（类似于SO）

2 个答案: