Multi Level Отзывчивого меню ... Transiction между мобильным и не мобильным

Question

Я создал многоуровневое адаптивное меню: http://codepen.io/mdmoura/pen/FrIbq

1 - Размещая курсор «содержание» пункт появится подменит;

2 - При изменении размера меню на мобильный телефон появится ссылка меню, и меню исчезнет.

До сих пор так хорошо ... Что отсутствует:

A - При нажатии на ссылку меню, меню должно стать видимым или невидимым;

B - При нажатии одного из подменю его дочерняя ul должна стать видимой или невидимой.

Конечно (A) и (B) должны быть только мобильной версией, поэтому ширина менее 800 пикселей.

Я пытался ее решить, используя 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'); 
    } 
}); 

Но я получаю проблемы при изменении размера от Мобильной версии, а не Мобильной версии ...

Может кто-нибудь помочь мне? Используя Запрос или нет ...

Спасибо, Miguel

Answer 1

Похоже, проблема здесь была с погрузкой узнать из GitHub.

Я изменил источник enquire.js чтобы загрузить его из моего домена во временное. Вот рабочий example

Update: Вместо того, чтобы использовать JQuery переключения, используйте класс .expanded {display: block;} тумблер по щелчку. http://codepen.io/anon/pen/oHyxK