下拉菜單上的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> 

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; 
     } 

Answer 1

這是你可以嘗試什麼

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

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

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

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

這裏是Fiddle鏈接