响应式菜单中的悬停和单击事件重叠

Question

我制作了一个 HTML5 响应式 2 级菜单，您可以看到 HERE。宽屏版本在悬停主菜单项时显示子菜单；窄屏（小于 768 像素）版本在单击主菜单项时显示子菜单。

做事件切换的函数是：

function horizVert() {
    var event;
    if ($(window).width() < 768) {
    event = "click";
    $('nav,.navcontainer').addClass("vertical").removeClass("horizontal");
} else {
    event = "hover";
    $('nav').removeAttr("style");
    $('nav,.navcontainer').addClass("horizontal").removeClass("vertical");
    }
    $('nav ul li').removeClass("active");
    $('nav ul a').on(event, function () {
        $(this).parents('li').toggleClass("active");
    });
}
horizVert();
$(window).resize(horizVert);

如您所见，如果您调整窗口大小，“事件切换”不会正确发生，并且窄菜单会对悬停做出反应。

我做错了什么？

谢谢！

Answer 1

为什么不使用 css 3 通过媒体查询确定窗口宽度，然后相应地应用类？您将拥有一个流利的代码并且更容易理解。

我建议你创建一个新类，或者甚至在现有的类中，添加媒体查询并在窗口低于 768 时应用新的 css。