Javascript 使用jquery垂直切换菜单

请看这个代码笔，了解我所说的示例

我有一个nav.mainnav，其中包含一系列链接（不是一个列表，也不确定它们是否最好是一个列表）。单击后，将切换.mainnav的显示，并显示链接以及一个div以再次关闭导航

问题1：div动画来自左侧，因此它们从左侧滑入，但我希望它们从您单击的div向下滑动，以使其显示

问题2：我希望链接一个接一个地快速出现，但显然是一个接一个地出现

这是密码

Html

Jquery

$(".navtoggle").click(function () {
            $(".mainnav").toggle("slow");
            $(".navtoggle").toggle("slow");
            $(".navtoggleclose").toggle("slow");
            $(".navbutton").toggle("slow");
        });

        $(".navtoggleclose").click(function(){
            $(".mainnav").toggle("slow");
            $(".navtoggle").toggle("slow");
            $(".navbutton").toggle("slow");
            $(".navtoggleclose").toggle("slow");
        });

---

滑动切换并将代码更改为以下内容使我的效果非常接近我想要的效果。谢谢

html

jquery

$(".navtoggle").click(function () {
            $(".navbutton").slideToggle("slow");
            $(".navtoggleclose").slideToggle("slow");
        });

---

滑动切换并将代码更改为以下内容使我的效果非常接近我想要的效果。谢谢

html

jquery

$(".navtoggle").click(function () {
            $(".navbutton").slideToggle("slow");
            $(".navtoggleclose").slideToggle("slow");
        });

---

为了解决第一个问题，您可以使用user.slideToggle（“慢”）来解决第一个问题。slideToggle（“慢”）

<div class="navtoggle">Menu</div>
                        <a href=""><nav class="navbutton">Home</nav></a>
                        <a href=""><nav class="navbutton">About</nav></a>
                        <a href=""><nav class="navbutton">Locations</nav></a>
                        <a href=""><nav class="navbutton">Prices</nav></a>
                        <a href=""><nav class="navbutton">Book</nav></a>
                        <a href=""><nav class="navbutton">Private</nav></a>
                        <a href=""><nav class="navbutton">Affiliates</nav></a>
                        <a href=""><nav class="navbutton">Shop</nav></a>

.navtoggle{
    display: none;
    visibility: hidden;
  }

  .navbutton{
  display: none;
  text-align: center;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  background: $rgradl;
  border-radius: 5%;
  margin-top: 0.4em;
  box-shadow: $dshadow;  
}

$(".navtoggle").click(function () {
            $(".navbutton").slideToggle("slow");
            $(".navtoggleclose").slideToggle("slow");
        });