Bootstrap 悬停和单击事件在一起使用以同时具有菜单的悬停和单击事件时发生冲突

Question

我是第一次使用引导程序 2.3 版。到目前为止，由于这是我第一次实现引导响应式设计，所以进展并不顺利。

我有一个带有子菜单的导航菜单，我被要求同时拥有这些菜单的 click 和 hover 功能，以便在桌面上查看网站时，它使用悬停查看子菜单并使用 Click 事件正在移动设备上查看。

在遇到几个问题后，我设法让它工作，这样我的两个事件都可以用于菜单导航，但我遇到了一个问题，我仍然卡住了。

到目前为止我所拥有的演示的链接在这里：

http://demo.kashmirsouq.com/TestPage.htm

现在在移动设备上，我必须双击菜单并等待半秒钟才能打开子菜单。我无法弄清楚如何在用户单击时显示子菜单。

我已经为这个问题苦苦挣扎了两天，所以我希望能帮助我解决这个问题。

参考：我正在使用以下主题：http://htmlstream.com/unify/ 但我对代码进行了一些修改以具有悬停功能。`

悬停事件基于此：https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

我将不胜感激这方面的帮助。

Answer 1

您实际上可以单独使用 CSS 完成此操作，而不必担心为此渲染 JS。在您的菜单项上使用:hover 伪类，并在悬停时将显示块应用于选择器的相邻“菜单项”（当然，您也可以为动画添加 css-transitions - 请记住，尽管 css 过渡已获胜'在非 HTML5 浏览器上不受支持）。

:hover 伪类在第一次点击时在触摸设备上激活，点击其他任何地方都会取消悬停状态。请参阅以下文章，该文章传达了相同的信息：http://www.html5rocks.com/en/mobile/touchandmouse/#toc-4

这是一个演示此方法的工作小提琴 (http://jsfiddle.net/svigna/2eaNY/)。