如何解决我如何使下拉菜单使用纯JS平滑显示?
我创建了一个放下菜单,在放下的部分上单击时,display: none;
的类别为JS
,而motherHover
的类别为display: grid;
,以使其可见。 / p>
但是问题在于菜单显示为“一键式”。
如何使下拉菜单使用纯JS流畅显示?
function fgf(){
var hoverElement = document.querySelector(".father"),tragtedElement = document.querySelector("#dds");
tragtedElement.classList.toggle("motherHover");
}
ul{
list-style: none;
}
.father{
}
.mother{
display: none;
}
.asd {
display: grid;
}
.motherHover{
display: grid;
}
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet"/>
<ul>
<li class="father" onclick="fgf()">
<button>
Drop Menu
</button>
</li>
<li id="dds" class="mother" >
<ul class="asd">
<i>g</i>
<i>g</i>
<i>g</i>
<i>g</i>
<i>g</i>
</ul>
</li>
</ul>
解决方法
通常使用max-height
和转换来完成。
function fgf(){
let asd = document.querySelector(".asd");
asd.classList.toggle("open");
}
ul{
list-style: none;
}
.asd {
display: grid;
max-height: 0;
transition: max-height 500ms;
overflow: hidden;
background: green;
color: white;
}
.open {
max-height: 100px !important;
}
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet"/>
<ul>
<li class="father" onclick="fgf()">
<button>
Drop Menu
</button>
</li>
<li id="dds" class="mother" >
<ul class="asd">
<i>g</i>
<i>g</i>
<i>g</i>
<i>g</i>
<i>g</i>
</ul>
</li>
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。