多级响应菜单...移动和非移动之间的转换答案

【问题标题】：Multi Level Responsive Menu ... Transiction between mobile and non mobile多级响应菜单...移动和非移动之间的转换
【发布时间】：2013-09-15 14:35:34
【问题描述】：

我创建了一个多级响应式菜单：http://codepen.io/mdmoura/pen/FrIbq

1 - 将鼠标放在“内容”项上会出现一个子菜单；

2 - 将菜单调整为移动设备大小时，将出现一个菜单链接，然后菜单消失。

到目前为止一切都很好......缺少的是：

A - 单击菜单链接时，菜单应变为可见或不可见；

B - 当其中一个子菜单被点击时，它的子菜单 ul 应该变得可见或不可见。

当然（A）和（B）应该只是手机版，所以宽度小于800px。

我尝试使用 enquire.js 解决它：http://codepen.io/mdmoura/pen/alxkI。所以我有：

$('nav a[href="#"]').click(function (event) {
  event.preventDefault();
});

enquire.register("screen and (max-width: 800px)", {
    match: function () {
      $('nav a[href="#"]').on('click.match', function () {
        $(this).next('ul').toggle();
      })
    },
    unmatch: function () {
      $('nav a[href="#"]').off('click.match');
    }
});

但是从移动版而不是移动版调整大小时出现问题...

有人可以帮我吗？是否使用查询...

谢谢你，米格尔

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

看来，这里的麻烦在于从 github 加载查询。

我已更改 enquire.js 的来源，以便从我的域中临时加载它。这是一个有效的example

更新： 而不是使用 jQuery 切换，使用类 .expanded {display: block;} 在点击时切换。 http://codepen.io/anon/pen/oHyxK

【讨论】：

不是真的...试试大屏幕上的菜单。你会看到它工作正常。将其调整为移动设备。它工作正常......现在调整回大屏幕......现在它停止工作......这是我无法解释的问题......有什么想法吗？
当然 :) 您正在使用 jQuery 切换，它将内联样式 display:none 添加到您的下拉列表中。它具有更高的优先级，并且不会在unmatch 方法中被删除。您可能还想向您的ul-s 添加类（例如nav-ul、inner-dropdown）以稍微清理一下您的LESS。
您在 JQuery 部分而不是在工具栏中有什么建议？我不知道该怎么做。你能给我举个例子吗？关于 LESS：使用 CSS 类有什么好处？
我建议在点击 .expanded {display: block;} - Fiddle 时添加/删除类。关于使用类而不是标签选择器 - 太大的话题无法在评论中涵盖。看看这些内容：Writing efficient CSS、idiomatic CSS、GitHub CSS Style guide。它还将大大提高代码的可读性，第三人在阅读时很难跟踪所有嵌套的选择器。