iPad 上的下拉菜单答案

【问题标题】：Dropdown Menu on iPadiPad 上的下拉菜单
【发布时间】：2012-12-06 11:22:16
【问题描述】：

我正在使用 CSS 作为我正在构建的网站上的下拉菜单。当您将鼠标悬停在父选项卡上时，下拉菜单会使用 CSS3 的转换属性淡入。我遇到的问题是父标签链接到另一个页面，因此当您在 iPad 上点击父标签时，它会将您带到该页面而不是显示下拉菜单 - 这会导致可用性问题。

有没有办法让它在第一次点击时出现下拉菜单，第二次点击时将您带到父页面？

这是我用来显示菜单的 HTML：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="http://www.apple.com">Team</a>
      <ul>
        <li><a href="http://www.apple.com">Our Workers</a></li>
        <li><a href="http://www.apple.com">Join Us</a></li>
      </ul>
     </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

这是一个 jsFiddle 链接：http://jsfiddle.net/A64QU/197/

在此先感谢，感谢您的帮助。

【问题讨论】：

标签： ipad drop-down-menu

【解决方案1】：

您的设计是正确的，它在第一次点击时调用菜单，在第二次点击时调用父页面。这将适用于用户不能总是“悬停”的仅触摸屏或有时触摸屏的设备，并且对于难以将光标稳定在菜单上的用户来说至关重要，因此我建议在悬停显示菜单上使用它无论是 Mobile Safari、Internet Explorer 还是任何其他浏览器，都可以进行设计。

按照您的要求，处理 <a> 标签上的点击事件（例如使用 jQuery：http://api.jquery.com/click/）并以这种方式隐藏/显示菜单（您可以使用 jQuery 的切换，或显示/隐藏。）然后扩展代码考虑菜单是显示还是隐藏，判断是应该阻止<a>标签的默认行为并显示菜单（例如jQuery的preventDefault:http://api.jquery.com/event.preventDefault/）还是允许点击<a>的默认行为发生：导航到<a href> URL。

考虑到使用这种方法，您可能还需要为用户提供一种在菜单打开后关闭菜单（并阻止页面的某些部分）的方法。这通常是通过文档级别的点击处理程序来完成的。

我不建议尝试实施触摸保持，因为这对用户来说并不为人所知。根据我的用户测试经验，大多数人不会尝试这样做，即使是在看起来像是菜单的东西上。

【讨论】：

【解决方案2】：

在触摸 UI 隐喻中没有“悬停”，尽管在 jQuery Mobile UI 中有一个对应的事件被称为 touchhold；当手指在触摸屏上保持按下一定时间时触发它，例如500 毫秒、700 毫秒等等。当您将手指按住某些键（例如 [a] 键）时，iPad 的虚拟键盘上会发生类似的情况：您会弹出 [a] 的变体形式（变音符号、重音符号等）。

您可以连接起来，以便在 touchhold 而不是在点击事件上调用菜单打开代码，然后让各个菜单项监听点击事件。您要么必须自己通过编写所需的 javascript 来覆盖 Mobile Safari 的 touchevents，要么安装实现此行为的 UI 库。

【讨论】：