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

标签 html css responsive-design

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

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

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

谁能帮我解决这个问题。

最佳答案

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

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

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

关于html - 为什么响应式菜单无法正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28178238/

相关文章:

javascript - 使移动 View 在 +90 度的横向上保持纵向模式

css - 在我的 Rails 元素中,为什么我的媒体查询只在开发中响应?

html - 使用 CSS 的纯图像导航栏的最佳实践

php - mysql索引变化

javascript - 正确缩放 html 并使用 javascript/jquery 附加新信息

javascript - 在 jquery fadeIn 上,我怎样才能使它们保持在同一条线上?

html - 是否可以在 Safari 的 "responsive design mode"中调整缩放?

jquery - 将 div 定位在另一个没有绝对的 div 中

css - 像 animate 这样的 CSS3 属性是否过于占用 CPU?

javascript - 我的 CSS 或 JavaScript 都没有修改 <div> 标签