我正在尋找一種更簡單的方式在Vanilla Javascript中添加jQuery slidedown效果。這是特別困難的,因爲它在一個下拉菜單中。下拉菜單上的jQuery Slidedown的Vanilla JS版本
目前我所擁有的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>
UPDATE: 這裏是被施加到下拉.SUB-NAV類時,它上面的Li還通過JS施加給它的。主動類的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;
}
只看'褪色out'例如[公報站點](http://vanilla-js.com/) –