jquery - 未应用最大高度响应

Question

我正在学习如何制作响应式导航栏。为了理解检查这个 jsfiddle http://jsfiddle.net/4Yr7J/

如果你展开结果，你会看到一个不同的菜单，但是当它最小化时(默认情况下由 jsfiddle 显示)你只会看到一个名为“菜单”的栏，由于添加了以下类，该栏应该在单击时增长

.showing{
    max-height: 20em;
}

通过

    <script>
        $('.handle').on('click', function(){
            $('#main_menu nav ul').toggleClass('showing');
        });
    </script>

类(class)正在添加中。但是，属性 max-height:20em 未被识别。我注意到开发工具显示它被划掉了。我不知道是什么原因造成的，但非常感谢您的帮助。

Answer 1

Revised JSFiddle Here

问题是，当涉及到 CSS 时，

#main_menu nav ul {
    width: 100%;
    max-height: 0;
}

优先于

.showing {
    max-height: 20em;
}

因为它更具体。我们可以解决此问题的一种方法是将其替换为:

#main_menu nav ul.showing {
    max-height: 20em;
}

这比#main_menu nav ul 更具体，这意味着此 CSS 规则将优先于 max-height:0。