Javascript jQuery的Vanilla JS版本在下拉菜单上向下滑动

我正在寻找一种更简单的方法来在Vanilla Javascript中添加jQuery slidedown效果。这尤其困难，因为它位于下拉菜单中

目前，我手头的js将一个活动类应用于li onclick。我显然能够显示和隐藏内容，但唯一缺少的是幻灯片效果

我尝试过用CSS来实现这一点，但如果不声明一个固定的高度，我似乎无法做到这一点

另外，如果要附加代码，请使用JSFIDLE，因为jsbin在我的机器上被锁定

以下是标记：

<nav id="main-nav">
    <ul>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
    </ul>
</nav>

---

这就是你可以尝试的

滑块{
溢出y：隐藏；
最大高度：500px；/*近似最大高度*/
过渡性质：全部；
过渡时间：.5s；
}
.关闭{
最大高度：0；
}

切换滑块

这是您可以尝试的

滑块{
溢出y：隐藏；
最大高度：500px；/*近似最大高度*/
过渡性质：全部；
过渡时间：.5s；
}
.关闭{
最大高度：0；
}

切换滑块

仅使用CSS向上/向下滚动的快速答案：

/*隐藏的*/

#element {
    transition : 180ms transform ease-out;
    transform  : translateY(-100%);         
}

/*展示*/

#element.displayed {
    transform  : translateY(0);
    transition : 150 transform ease-in;
}

注意：这最适合于元素大小不影响其他元素大小的情况。

---

例如：垂直子菜单

仅使用CSS向上/向下滚动的快速答案：

/*隐藏的*/

#element {
    transition : 180ms transform ease-out;
    transform  : translateY(-100%);         
}

/*展示*/

#element.displayed {
    transform  : translateY(0);
    transition : 150 transform ease-in;
}

注意：这最适合于元素大小不影响其他元素大小的情况。

---

例如：垂直子菜单

查看

淡出

示例查看

淡出

解决方案的示例不能依赖于固定高度。@wgallop解决方案不依赖于固定高度。解决方案使用“最大高度”属性，这意味着它描述了高度的上限。高度可以是介于0和最大高度值之间的任何值。如您所见，注释中还提到了其近似最大高度。已理解。这对我不起作用，不过，我正在发布有关我的问题的更多详细信息。@wgallop您可以在fiddle中创建一个代码演示，以便根据您的需求轻松尝试解决方案。当我将其插入JSFIDLE时，它似乎可以工作……出于某些原因，在我的本地，它不允许该解决方案依赖于固定高度。@wgallop该解决方案不依赖于固定高度高度。解决方案使用“最大高度”属性，这意味着它描述了高度的上限。高度可以是介于0和最大高度值之间的任何值。如您所见，注释中还提到了其近似最大高度。已理解。这对我来说不起作用，但是我正在发布关于我的问题的更多详细信息。@wgallop你能在fiddle中创建一个代码的演示程序，以便根据你的需求很容易地尝试解决方案。当我将它插入JSFIDLE时，它似乎起作用了……由于某种原因，在我的本地服务器上它不起作用