我如何使下拉菜单使用纯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>