Dropdown菜单上的jQuery Slidedown的Vanilla JS版本

Question

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

目前我所使用的js将一类活动应用于li onclick。我显然能够显示和隐藏内容，但唯一缺少的是slideDown效果。

我试过用CSS做这个但是如果没有声明一个固定的高度似乎无法做到这一点。

此外，如果您要附加代码，请使用jsfiddle，因为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>

更新：以下是当它上面的li通过JS应用了.active类时，应用于下拉.sub-nav类的CSS

        .sub-nav {
            max-height: 0;
            position: static;
            -webkit-transition: all 500ms linear;
            -moz-transition: all 500ms linear;
            -o-transition: all 500ms linear;
            transition: all 500ms linear;
        }


.main-menu-li_dropdown.active .sub-nav {
            position: static;
            overflow-y: hidden;
            max-height: 500px; /* approximate max height */

            transition: max-height 500ms linear;
        }

Answer 1

这是你可以尝试的

.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */

	transition-property: all;
	transition-duration: .5s;
}

.slider.closed {
	max-height: 0;
}

<div style="width: 200px;">
		<div class="slider" id="slider">
			<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>
		</div>
	</div>
<button onclick="document.getElementById('slider').classList.toggle('closed');">Toggle slider</button>

这是Fiddle链接

Answer 2

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

/ *隐藏* /

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

/ *显示* /

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

注意：这最适合元素大小不影响其他元素大小的情况。例如：一个垂直子菜单。