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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript web