Javascript 单击时设置现有下拉菜单的动画

这是HTML

<header>
  <a class="show-menu">Menu</a>
  <nav>
    <a>anchor1</a>
    <a>anchor2</a>
    <a>anchor3</a>
  </nav>
</header>

---

jQuery UI扩展了jQuery本机toggleClass以获取第二个可选参数：持续时间

toggleClass( class, [duration] )

---

参考

jQuery幻灯片切换如何

$(function() {
  $('a.show-menu').click(function() {
  $('header nav').slideToggle();
  });
  });

---

您是否尝试使用

滑动切换

而不是使用

切换类

切换类？是的，切换类是启用display:block所必需的。这是最接近的，但是列表名称加载不均。第一个瞬间加载，然后在幻灯片完成后加载其余部分。有什么想法吗？

$(function() {
  $('a.show-menu').click(function() {
  $('header nav').slideToggle(function(){$(this).toggleClass('active')});
  //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^and toggle your class if you want
  //or can you use simple slideToggle(); 
  });
  });

$(function() {
  $('a.show-menu').click(function() {
  $('header nav').slideToggle();
  });
  });