javascript - 使用 jquery 垂直切换菜单

Question

请参阅此代码笔以了解我正在谈论的内容的示例 http://codepen.io/MarkRBM/pen/auDvp

我有一个包含一系列链接的 nav .mainnav(不是一个列表，不确定是否最好是列表)。 onclick .mainnav 的显示被切换，链接出现以及 div 再次关闭导航。

问题1:div 动画来自左侧，所以它们从左侧滑入，但我希望它们从您单击的div 向下滑动以使其出现。

问题 2:我希望链接能够快速但明显地一一出现。

这是代码

HTML

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

CSS

.navtoggle{
    display: block;
    visibility: visible;
    text-align: center;
  }
  .navtoggleclose{
    display: none;
    visibility: visible;
    text-align: center;
  }
.mainnav{
  display: none;

}


.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 () {
            $(".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");
        });

Answer 1

slideToggle 并将代码更改为以下内容使我获得了足够接近我想要的效果。谢谢。

html

<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>

CSS

.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;  
}

j查询

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