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

Sub-menu not showing up after screen resize

本文关键字：显示 菜单 屏幕 调整      更新时间：2023-09-26

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

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

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

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

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

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

当你看到窗口的大小：

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

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

当您说.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演示

相关文章：