HTML5自适应导航问题

Question

jsfiddle code here

So when screen is > 580 px width, it needs to work on mouse hover, and it does. If screen is < 580 px width, you have to click on a link for it to show sub links. For example, if you look at the jsfiddle code and click on portfolio the sub menu's will open, but inside those subs there are other subs, for example work has two sub menu's -> internship and freelance. The problem is, in mobile view portfolio works with on click, but the sub menu's work on mouse hover, but they also need to be on click view and if you click somewhere else on the screen, they need to disappear.

In jQuery I have tested:

if (document.documentElement.clientWidth < 580) { }

and

if (screen.width < 580) { } 

and inside these I have the .click function, but it does not work?

Can someone help me out? Thanks

Answer 1

Don't use JavaScript or jQuery. Use CSS3 media quires instead.