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

Question

我创建了一个reonsive菜单。我就像你在this fiddle看到的@media screen一样工作。除了一件事，一切都很好。有时，当您在小菜单和大菜单之间切换时，菜单内容不会显示。看看Jsfiddle并调整输出窗口的宽度。就像我告诉过的那样，有时会重新加载页面，如果第一次没有发生的话。

班级menu包含菜单内容。小菜单有display无（按下按钮时向下滑动），大菜单与display内联块一起使用。

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

有人可以帮我解决这个问题。

Answer 1

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

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

@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();
    }
}); 

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