最大高度响应未应用

Question

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

如果展开结果，你会看到一个不同的菜单，但是当它最小化时（默认情况下由jsfiddle显示）你只看到一个名为“menu”的栏，这个栏在点击时应该增长，因为添加了以下的类< / p>

.showing{
    max-height: 20em;
}

通过

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

该课程正在加入。但是，属性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。