下拉菜單-如何在第二次單擊按鈕時反轉動畫？

Question

我正在嘗試使用jQuery創建下拉菜單。

這是我的HTML：

<div class="overlaydiv">This is my menu!</div>  

    <div class="row one">
      <div class="large-12 columns">



      </div>
    </div>


    <div class="row two">
      <div class="large-12 columns">

         <button id="b1">Drop down the menu!</button>   

      </div>
    </div>

CSS的疊加層：

.overlaydiv { height: 100vh; width: 100vw; background-color: aquamarine; position: absolute; top: -100%; z-index: 1; }

這是jQuery，可在單擊時下拉菜單：

$("#b1").on("click", function() {

         $(".overlaydiv").animate({top: "0%"}, 200, 'swing');

      });

在第二次點擊時反轉動畫的最簡單方法是什么？

Answer 1

我能想到的最好方法是使用CSS過渡。

因此，這是CSS：

.overlaydiv{ 
    height: 100vh; 
    width: 100vw; 
    background-color: aquamarine; 
    position: absolute; 
    top: -100%; 
    z-index: 1; 
    transition: all 0.2s;
}

.overlaydiv.active{
    top: 0%;
}

和JS

$("#b1, .overlaydiv").on("click", function() {

     $(".overlaydiv").toggleClass("active");

});

Answer 2

您可以檢查以在按鈕上激活活動 class並對其進行操作。

 $("#b1").on("click", function() { if($(this).hasClass("active")){ $(this).removeClass("active"); $(".overlaydiv").animate({top: "-100%"}, 200, 'swing'); }else{ $(this).addClass("active"); $(".overlaydiv").animate({top: "0%"}, 200, 'swing'); } }); 

 .overlaydiv { height: 100vh; width: 100vw; background-color: aquamarine; position: absolute; top: -100%; z-index: 1; } #b1 {position:relative;z-index:2} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="overlaydiv">This is my menu!</div> <div class="row one"> <div class="large-12 columns"> </div> </div> <div class="row two"> <div class="large-12 columns"> <button id="b1">Drop down the menu!</button> </div> </div>