我如何使用纯 JS 使下拉菜单顺利显示？

Question

我做了一个下拉菜单，display: none;当它被点击时，下拉部分有JS给它的类motherHover，display: grid;让它可见。但问题是菜单出现了One-shot。纯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>

Answer 1

它通常完成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>