2016-05-20 88 views
0

我正在尋找一種更簡單的方式在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; 
     } 
+0

只看'褪色out'例如[公報站點](http://vanilla-js.com/) –

回答

2

這是你可以嘗試什麼

.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鏈接

+0

該解決方案必須不依賴於一個固定的高度。 – wgallop

+0

@ wgallop解決方案不依賴於固定的高度。解決方案使用最大高度屬性,這意味着它描述了高度的上限。高度可以是介於0和最大高度值之間的任何值。您可以看到該評論還提到了其提到的近似最大高度。 – Manish

+0

瞭解。這不適合我,但是我發佈了更多關於我的問題的細節。 – wgallop