Multi Level Responsive Menu ... Transiction between mobile and non mobile

Multi Level Responsive Menu ... Transiction between mobile and non mobile

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