如何处理触摸屏设备（iPad）上的菜单悬停答案

【问题标题】：How to deal with menu hover on touch screen devices(IPad)如何处理触摸屏设备（iPad）上的菜单悬停
【发布时间】：2013-09-23 04:39:08
【问题描述】：

我正在使用基于 CSS 的菜单，其中我使用悬停效果来显示子菜单。我很想知道这个菜单在触摸屏设备上是如何工作的。我在 iPad 上测试过它似乎不起作用。

<ul id="CSSMenu">
        <li><a class="Home" href="/index.aspx" style="background: none repeat scroll 0% 0% transparent;">Home</a> </li>
        <li>


<a class="healthcare" href="/healthcare-reform" style="background: none repeat scroll 0% 0% transparent;">Healthcare Reform</a>

            <ul aclass="healthcare" style="background-color: rgb(51, 153, 153);">
                <li><a href="#">Credits/Subsidies</a></li>
               <li><a href="#">Credits/Subsidies</a></li>
                <li><a href="#">Credits/Subsidies</a></li>
                <li><a href="#">Credits/Subsidies</a></li>

            </ul>
        </li>

    </ul>

【问题讨论】：

标签： css ipad menu hover

【解决方案1】：

您需要使用一些 javascript 来允许触摸屏上的点击/点击事件。 Superfish 是一个下拉插件，它使用 jQuery 在桌面机器的悬停和移动设备的点击事件上显示/隐藏子菜单项。

【讨论】：

【解决方案2】：

检测触摸屏并适当处理它们充其量是棘手的。有些设备同时支持两者，您无法判断最终用户使用的是触摸还是键盘。最好的办法是通过 CSS 或 JQuery 创建一个结构，以取代检测到触摸屏设备的悬停功能。一些工程师通过双击事件来处理这个问题，但作为触摸屏上的最终用户，我觉得这很烦人，其他人可能不会。

在您的特定情况下，您可以通过单击显示子菜单来替换父元素上的悬停，然后在单击其他任何内容时隐藏子菜单。

【讨论】：