javascript - 下拉菜单-如何在第二次单击按钮时反转动画？

我正在尝试使用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');

      });

在第二次点击时反转动画的最简单方法是什么？

最佳答案

我能想到的最好方法是使用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");

});