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>

Answer 2

我创建了一个代码集来显示http://codepen.io/waddington/pen/yyrjJO

关于你的，如果你将overflow:hidden;添加到ul，那么这将按你想要的方式工作。

在我的版本中，我使用jQuerys切换属性来设置ul的动画，而不是添加一个类;您可以将400更改为以毫秒为单位的不同时间以满足您的需求。

最大高度为0，文本仍显示

2 个答案: