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

【问题标题】：Sub-menu not showing up after screen resize调整屏幕大小后不显示子菜单
【发布时间】：2015-04-09 18:06:09
【问题描述】：

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

这是我的导航的精简版的 JSFiddle https://jsfiddle.net/5h5bhwu4/2/

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

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

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

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

你需要在 JS 上做悬停效果，而不是在 CSS 上。

当你看到窗口的大小时：

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

你需要强制悬停，而你不能用 CSS 做到这一点

【讨论】：

【解决方案2】：

当你说.hide() 时，它会添加内联样式display:none，它会一直覆盖样式。最好是有一个类并添加该类。

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

Fiddle Demo

【讨论】：