Question

我正在构建一个响应式导航，并且遇到了问题。导航的本质是它具有响应性，因此您单击“三行”按钮，菜单会在页面中弹出。该菜单支持嵌套的＆lt; ul＆gt;，因此在菜单中，您可以单击一个框（在右侧）以打开嵌套菜单。现在，我的问题是我只想打开导航onclick，而不是悬停。

本质上：

主导航（桌面）：将鼠标悬停在＆lt; li＆gt;上打开孩子＆lt; ul＆gt;
当在一定宽度（媒体查询）下隐藏它以显示要点击的黑框时，您可以单击下一个框以打开＆lt; ul＆gt;

一切正常，但是用于打开桌面导航的悬停事件显然会在响应式视图中触发导航打开。我该如何防止这种情况？

这是导航的JSFiddle，请点击黑框：http://bit.ly/ZZJcYk

Answer 1

我推荐的一种方法是使用： http://modernizr.com/

在开发响应式网站/应用时，它会以其他许多方式为您提供帮助。

通过包含它，您将获得（除其他外）HTML节点的类。

如果用户在触摸设备上，那么它将是.touch类，如果没有，.no-touch。

要使用此功能，您可以使用以下代码执行以下操作：

$('.no-touch .nav').on({
        mouseenter: function () {
            $(this).children('.nav-submenu').toggle();
        },
        mouseleave: function () {
            $(this).children('.nav-submenu').toggle();
        }
    }, '.nav-item');

$('.no-touch .nav')将确保此代码仅在非触摸设备（如桌面）上执行。还有其他解决方案，但从长远来看，使用modernizr是我强烈建议的。

如何防止在响应式导航上悬停触发

1 个答案: