Question

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

执行事件切换的功能是：

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);

正如您所看到的，如果您调整窗口大小，那么＆＃34;事件开关＆＃34;没有正确发生，狭窄的菜单会对悬停做出反应。

我做错了什么？

谢谢！

Answer 1

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

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

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

1 个答案: