jquery - CSS Mega Menu - 触摸屏 PC 上的奇怪行为

Question

我在这个网站上有一个菜单，它在标准 Windows 8.1 PC 上的 chrome 上运行正常，但在带有触摸屏的 Windows 8.1 笔记本电脑上的 chrome 上查看时出现奇怪的问题。

子菜单项不可点击，当您失去焦点时，文本会出现奇怪的重影。以前没见过这个，也不太确定是什么原因造成的。我使用的是 Foundation 4，该网站是建立在 Orchard 上的。

http://www.barossa.sa.gov.au.web7.tempdomain.com.au/

如有任何建议，我们将不胜感激!

Answer 1

要重现该问题，请打开 Google Chrome 开发者工具并启用“模拟触摸屏”。

现在单击顶级菜单项(例如 Council)并将鼠标悬停在菜单外。我们可以看到菜单背景子菜单标题是可见的。将鼠标悬停在“Council”上，您会看到最后一级菜单项变得可见。

发生这种情况的原因是，当您单击“Council”时，它会将 CSS 类“hover”添加到其 li 元素。在那个 li 中有一个带有“下拉列表”类的 ul。正在执行的 CSS 规则会在将“悬停”类应用于父 li 时将其设置为可见。

查看基础文档 http://foundation.zurb.com/docs/v/4.3.2/components/top-bar.html这里发生相同的功能。不同之处在于，当在菜单外单击时，“悬停”类将从菜单中的元素中删除。您的解决方案不会发生这种情况。

可能与...有关

• > https://github.com/zurb/foundation/issues/2505
• > https://github.com/zurb/foundation/issues/2945

我建议您将 Foundation CSS 和 JavaScript 更新到最新版本 (4.3.2)。

否则，您可以创建一些脏的 jQuery 来监视您何时在菜单外单击并从菜单内的所有元素中删除 .hover 类。

希望对您有所帮助。