0

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

2 回答 2

0

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

于 2013-09-23T04:51:25.213 回答
0

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

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

于 2014-06-22T12:21:31.350 回答