我如何使用纯 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(){&nbsp; &nbsp; let asd = document.querySelector(".asd");&nbsp; &nbsp; asd.classList.toggle("open");}ul{&nbsp; &nbsp; list-style: none;}.asd {&nbsp; &nbsp; display: grid;&nbsp; &nbsp; max-height: 0;&nbsp; &nbsp; transition: max-height 500ms;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; background: green;&nbsp; &nbsp; color: white;}.open {&nbsp; &nbsp;max-height: 100px !important;}<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet"/>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li class="father" onclick="fgf()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Drop Menu&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li id="dds" class="mother" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="asd">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i>g</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i>g</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i>g</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i>g</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i>g</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>