Question

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

这是我的导航https://jsfiddle.net/5h5bhwu4/2/

的精简版的JSFiddle

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

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

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

Answer 1

您需要对JS执行悬停效果，而不是CSS。

当您看到窗口的大小时：

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

您需要强制悬停，而无法使用CSS

Answer 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

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

2 个答案: