HTML5自适应导航问题

Question

jsfiddle代码在这里

因此，当屏幕宽度大于580像素时，它需要在鼠标悬停时工作，并且可以。 如果屏幕宽度小于580像素，则必须单击链接以显示子链接。 例如，如果你看的jsfiddle码并点击portfolio的子菜单的打开，但这些潜艇里面还有其他的潜艇，例如工作有两个子菜单的- >实习和自由职业者。 问题是，在移动视图portfolio ，单击时可以使用，但是子菜单在鼠标悬停时起作用，但是它们也需要在单击视图中，如果您在屏幕上的其他位置单击，则它们需要消失。

在jQuery中，我已经测试过：

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

和

if (screen.width < 580) { } 

在这些里面我有.click函数，但是不起作用？

有人可以帮我吗？ 谢谢

Answer 1

不要使用JavaScript或jQuery。 请改用CSS3媒体资源 。