1

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

在此先感谢，感谢您的帮助。​</p>

4

2 回答 2

2

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

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

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

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

于 2012-12-06T03:16:00.750 回答
0

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

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

于 2012-06-12T16:52:13.493 回答