javascript - HTML5 响应式导航问题

Question

jsfiddle code here

因此，当屏幕宽度 > 580 像素时，它需要在鼠标悬停时工作，而且确实如此。如果屏幕宽度 < 580 像素，则必须单击链接才能显示子链接。例如，如果您查看 jsfiddle code 然后点击 portfolio 子菜单将打开，但在这些子菜单中还有其他子菜单，例如工作有两个子菜单 -> 实习和自由职业。问题是，在移动 View 中，portfolio 可在点击时使用，但子菜单可在鼠标悬停时使用，但它们也需要在点击 View 中，如果你点击屏幕上的其他地方，它们需要消失。

我在 jQuery 中测试过:

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

和

if (screen.width < 580) { } 

在这些里面我有 .click 功能，但它不起作用？

有人能帮帮我吗？谢谢

Answer 1

不要使用 JavaScript 或 jQuery。使用 CSS3 media quires相反。