触摸屏的短按/鼠标悬停替代方案？答案

【问题标题】：Short click / mouseover alternative for touch screen?触摸屏的短按/鼠标悬停替代方案？
【发布时间】：2014-01-20 14:52:14
【问题描述】：

我有一个菜单和一个子菜单，父菜单标题本身也指向一个页面，子菜单在鼠标悬停时打开。

我的问题是触摸屏，由于触摸屏上没有“悬停”，因此无法访问子菜单，因为父菜单页面在子菜单出现后立即打开，没有时间选择值来自它。

那么根据您的经验，有没有一种简单的方法可以使菜单适应触摸屏？
有没有一种简单或传统的方法来模拟触摸屏上的鼠标悬停？

我实际上并不是在要求代码，而是在这种情况下的常见行为是什么，我已经有一个网站，我想让触摸屏友好。

与基于脚本的解决方案相比，我显然更喜欢 CSS 解决方案。

【问题讨论】：

标签： html css touch submenu

【解决方案1】：

您可以让子菜单在按下时出现，然后用户将向下拖动（仍然按下屏幕）并用手指向上拖动以选择选项。

或者，您可以单击打开子菜单，然后单击以选择项目。

顺便说一句，这个问题会在https://ux.stackexchange.com/ 上得到更好的回应，它涉及与用户体验相关的问题

【讨论】：

是否有 CSS 方法来判断用户是使用鼠标还是触摸？
我怀疑有没有办法通过 CSS 找到它，你可以添加一个 touch css 文件并通过 juavascript 加载它（参见：stackoverflow.com/questions/14028113/…）
我想我会依赖屏幕大小，即如果屏幕很小，通过点击显示子菜单，将无法在大平板电脑上运行。
这是一种相当危险的方法，因为有人可能会使用触摸屏笔记本电脑或小屏幕分辨率的上网本
阅读您的参考资料，我将使用 js 检测触摸屏并替换 CSS（使用 jQ），以便将悬停在父菜单上替换为单击，并且单击不起作用，除非选项卡菜单是打开或为空，我建议您将其包含在您的答案中，以供进一步参考和其他面临类似情况的用户。

【解决方案2】：

有几种方法，对于纯 CSS 解决方案，您可以使用 :target 伪类。

.submenu {
    display: none;
}

.submenu:target {
    display: block;
}

<ul>
    <li>
        <a href="#submenu-1">Foo</a>
        <ul id="submenu-1" class="submenu">
            <li><a href="/bar">Bar</a></li>
            <li><a href="/baz">Baz</a></li>
        </ul>
    </li>
</ul>

【讨论】：