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>

这是一个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");

});

---

您可以选中该选项，以便在按钮上分配

类

活动，并对其执行操作

$（“#b1”）。在（“单击”，函数（）{
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
$（“.overlaydiv”）.animate（{top:“-100%”），200，'swing'）；
}否则{
$（此）.addClass（“活动”）；
$（“.overlaydiv”）.animate（{top:“0%”），200，'swing'）；
}
});
.overlydiv{高度：100vh；宽度：100vw；背景色：海蓝宝石；位置：绝对；顶部：-100%；z指数：1；}
#b1{位置：相对；z索引：2}

这是我的菜单！
放下菜单！
@user7393973我还没有（已经打包了我的东西），但是从这个问题上，我假设OP的原始代码是有效的，所以我只是从there@user7393973我编辑过。现在应该可以工作了。这是小提琴
$("#b1, .overlaydiv").on("click", function() {

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

});