Javascript 调整屏幕大小后不显示子菜单

我正在尝试构建一个定制的响应导航，它可以更改为移动设备的100%宽度下拉菜单。我有一些javascript，它隐藏了当窗口调整到一个新的断点（它在768px处改变）时可能打开的任何子菜单项。但是，如果我以手机大小（小于768px）打开子菜单，然后突然调整窗口大小，悬停效果不起作用，子菜单项不会显示在较大的屏幕上

下面是我的导航的简化版本

我认为唯一可能导致问题的部分是javascript：

    if (w > 768) {
        $("#nav > li > ul").hide();
    }

---

如果以低屏幕尺寸单击第一个菜单项，然后调整窗口大小，则当您将鼠标悬停在父项上时，它将不会显示相同的子菜单。但是如果你从一个大屏幕开始（或者如果你没有在低屏幕打开子菜单），它会工作得很好。我认为问题出在javascript中，但我看不到任何东西会阻止此子菜单的显示。

您需要在JS上执行悬停效果，而不是在CSS上

当您看到窗口的大小时：

if (w > 768) {
    $("#nav > li > ul").hide();
    // Put hover here
}

您需要强制悬停，而CSS无法执行此操作。当您说

.hide（）

时，它会添加内联样式

显示：无

，这会一直覆盖样式。最好是创建一个类并添加该类

  if (w > 768) {
            $("#nav > li > ul").removeAttr('style'); // this is for the style added on slideToggle
            $("#nav > li > ul").addClass('hidden');
        }

CSS

.hidden {
    display: none;
}