Question

这是HTML

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

CSS当前隐藏导航锚点，直到单击该按钮，然后jquery切换class属性以更改display：none以显示：block。

这是当前的JS，它在单击Menu时成功显示列表，但我正在尝试为其设置动画，以便在单击按钮时列表将滑动到位。

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

Answer 1

jQuery Slide Toggle怎么样？

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

http://jsfiddle.net/5FZmd/

Answer 2

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

toggleClass( class, [duration] )

Documentation

Answer 3

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

参考 slideToggle()

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

3 个答案: