Transition Height não funciona em UL
Estou tentando fazer algo simples: redimensionar a altura de uma UL, usando classList.toggle (javascript).
Percebo que, se no CSS eu tentar aplicar o estilo em cascata, não faz efeito na UL só por estar dentro de uma DIV.
Se no CSS eu colocar:
.cnt-filtro-body ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden;
transition: height 0.5s; background-color:#FF0; display:block;
pra estilizar somente ULs que estejam dentro da DIV que tem a classe chamada cnt-filtro-body, a coisa não funciona.
Só funciona se partir direto da ul, assim:
ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden;
transition: height 0.5s; background-color:#FF0; display:block;
Vejam o código.<!DOCTYPE html>
<html>
<head>
<style>
.cnt-filtro-body{position:relative; height:50px; width:100%;
}.secao-toggle{height:160px; display:block; float:left; position:relative;}
ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden;
transition: height 0.5s; background-color:#FF0; display:block;
}
</style>
</head>
<body>
<button onclick="myFunction()">Clique aqui</button>
<div class="cnt-filtro-body">
<ul id="myDIV"></ul>
</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("secao-toggle");
}
</script>
</body>
</html>
Minha necessidade é: estilizar apenas UL que estejam dentro da DIV que esteja usando a classe **cnt-filtro-body**Discussão (2)
Carregando comentários...