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

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

1 - 通过将鼠标放在"内容"项上，将出现一个子菜单;

2 - 将菜单大小调整为移动大小时，将出现菜单链接，菜单消失。

目前为止，一切都好。。。缺少的是：

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

B - 单击其中一个子菜单时，其子 ul 应变为可见或不可见。

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

我试图使用查询.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');
    }
});

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

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

谢谢米格尔