Question

我正在使用CSS作为我正在构建的网站上的下拉菜单。当您将鼠标悬停在父标签上时，下拉菜单将使用CSS3的transition-property淡入淡出。我遇到的问题是父标签链接到另一个页面，因此当您点击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/

提前致谢，我感谢任何帮助。

Answer 1

你在正确的轨道上设计了第一次点击菜单和第二次点击时的父页面。这将适用于仅触摸屏或触摸屏 - 有时用户无法始终“悬停”的设备，并且对于难以将光标稳定地保持在菜单上的用户而言至关重要，因此我推荐它通过悬停显示菜单设计，无论是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>网址。

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

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

Answer 2

没有＆＃34;悬停＆＃34;在触摸UI比喻中，尽管有一个在jQuery Mobile UI中被称为touchhold的对应事件;当手指在触摸屏上按下一定时间时，它被触发，例如， 500毫秒，700毫秒，无论如何。当你用手指按住某些按键时，在iPad的虚拟键盘上会发生类似的事情，例如：[a]键：你会得到[a]的变体形式的弹出窗口（变形，重音等等）。

您可以连线，以便在触摸屏上调用菜单打开的代码，而不是在点击事件上调用，然后让单独的菜单项监听点击事件。您可能必须通过编写所需的javascript来自行覆盖Mobile Safari的touchevents，或者安装实现此行为的UI库。

iPad上的下拉菜单

2 个答案: