0

我正在构建响应式导航，但遇到了问题。导航的本质在于它是响应式的，因此您单击“三行”按钮，菜单就会在页面中弹出。菜单支持嵌套 <ul>，因此在菜单内，您也可以单击框（右侧）打开嵌套菜单。现在，我的问题是我只想在单击时打开导航，而不是悬停。

在本质上：

  • 主导航（桌面）：将鼠标悬停在 <li> 以打开子 <ul>
  • 当在一定宽度下（媒体查询）隐藏它显示一个黑框可以点击，你可以点击下一个框打开<ul>

一切正常，但是打开桌面导航的悬停事件显然会触发导航在响应视图中打开。我怎样才能防止这种情况？

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

4

1 回答 1

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。

于 2013-03-24T20:56:35.197 回答