0

我创建了一个多级响应菜单：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');
    }
});

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

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

谢谢你，米格尔

4

1 回答 1

1

似乎，这里的麻烦在于从 github 加载查询。

我已经更改了 enquire.js 的来源，以便从我的域临时加载它。这是一个工作示例

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

于 2013-09-15T16:50:02.457 回答