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

Question

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

class menu 包含菜单内容。小菜单有一个 display none（它在单击按钮时向下滑动），大菜单使用 display 内联块。

只有当您在小菜单和大菜单之间切换时才会发生这种情况。从大到小都可以。

谁能帮我解决这个问题。

Answer 1

当您向上切换菜单时，向上滑动会在完成后在菜单上显示 none。在你的菜单向上滑动后它被隐藏了。当你变大时，它会保留显示：来自 JS 的 none，因此它不会显示。

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

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

Answer 2

该问题可能是由使用字符串的切换逻辑引起的。

在您的 javascript 中，您可以尝试更直观的代码，例如：

$('nav').on('click','.dropdown',function(){
    if($('.menu').css('display')=='none'){
        $('.menu').slideDown();
    }else{
        $('.menu').slideUp();
    }
});

它应该可以减少您的脚本错误。

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

Why is the responisve menu not working properly?

html

css

responsive-design