Question

我正在使用基于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>

Answer 1

您需要使用一些JavaScript来允许触摸屏上的点击/点击事件。 Superfish是一个下拉插件，使用jQuery显示/隐藏桌面计算机上的子菜单项以及移动设备的点击事件。

Answer 2

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

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

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

2 个答案: