Multi Level Responsive Menu … Transiction between mobile and non mobile

Question

I created a multilevel responsive menu: http://codepen.io/mdmoura/pen/FrIbq

1 - By placing the mouse over "content" item a sub menu will appear;

2 - When resizing the menu to mobile size a Menu link will appear and the menu disappears.

So far so good ... What is missing is:

A - When clicking in Menu link the menu should become visible or invisible;

B - When one of the submenus is clicked then its child ul should become visible or invisible.

Of course (A) and (B) should be only mobile version, so width less than 800px.

I tried to solve it using enquire.js: http://codepen.io/mdmoura/pen/alxkI . So I have:

$('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');
    }
});

But I get problems when resizing from Mobile version and not Mobile version ...

Could someone help me out? Using Enquire or not ...

Thank You, Miguel

Answer 1

Seems like, the trouble here was with loading enquire from github.

I've changed the source of enquire.js to load it from my domain temporary. Here's a working example

Update: Instead of using jQuery toggle, use class .expanded {display: block;} toggle on click. http://codepen.io/anon/pen/oHyxK