html - 为什么响应式菜单无法正常工作？

Question

我创建了一个响应式菜单。我使用 css @media screen 就像你在 this fiddle 上看到的那样.除了一件事，一切都很好。有时，当您在小菜单和大菜单之间切换时，菜单内容不会显示。查看 Jsfiddle 并调整输出窗口的宽度。就像我说的那样，它有时会发生，所以如果第一次没有发生，请有时重新加载页面。

menu 类包含菜单内容。小菜单有一个 display none(它在单击按钮时向下滑动)，大菜单使用 display 内联 block 。

只有当您在小菜单和大菜单之间切换时才会发生这种情况。从大到小效果很好。

谁能帮我解决这个问题。

Answer 1

当您向上切换菜单时，向上滑动会在完成后在菜单上显示无。在你的菜单向上滑动后它被隐藏了。当你变大时，它会保持显示:没有来自 JS，所以它不会显示。

解决这个问题的一种方法是强制它在大时始终可见

@media screen and (min-width: 550px){ /*big menu*/
    .menu{
        display:inline-block !important;
    }
}