Question

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

但是从移动版本而不是移动版本调整大小时我遇到了问题......

有人可以帮帮我吗？使用询问与否...

谢谢你，米格尔

Answer 1

似乎，这里的问题是从github加载查询。

我已经改变了enquire.js的来源，从我的域临时加载它。这是一个有效的example

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

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

1 个答案: