短触/鼠标悬停替代触摸屏？

Question

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

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

根据您的经验，有一种简单的方法可以使菜单适应触摸屏吗？ 是否有一种简单或传统的方式来模仿触摸屏上的鼠标悬停？

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

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

Answer 1

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

或者，您只需单击一下即可打开子菜单，然后按另一个选择项目。

另一方面，这个问题可以更好地回复https://ux.stackexchange.com/处理与用户体验相关的问题

Answer 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>