最大高度0，仍显示文字

Question

因此，我将ul元素的max-height设置为0，但仍显示了文本内容。

 <ul>
    <li>Bendeykt</li>
    <li>Analfabata</li>
</ul>

这是链接：

http://jsfiddle.net/wh9ntf2z/1/。

稍后，当用户单击菜单图标时，我想使用过渡效果来隐藏和显示导航栏。但是我不知道如何使列表元素消失。

Answer 1

尝试 overflow:hidden

$(".button").click(function(){
    $('ul').toggleClass('shown');
});

li{
    list-style-type:none;
    display:inline-block;
    padding:20px;
}

ul{
    background-color:green;
    max-height:0;
    overflow:hidden;
    transition:max-height 1s ;
}

.shown{
     max-height:100em; 
}

.button{
    cursor:pointer;
    color:grey;
    height:20px;
    width:50px;
    background-color:yellow;
    
    

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="button">Click</div>

    <ul>
        <li>Bendeykt</li>
        <li>Analfabata</li>
    </ul>