单击时为现有下拉菜单制作动画

Animate existing drop down menu on click

本文关键字：动画 下拉菜单 单击      更新时间：2023-09-26

这是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更改为display:block。

这是当前的JS，它在单击Menu时成功地显示了列表，但我正在尝试将其动画化，这样当单击按钮时，列表就会滑动到位。

$(function() {
  $('a.show-menu').click(function() {
  $('header nav').toggleClass('active');
  });
  });
jQuery Slide Toggle怎么样？ 
$(function() {
  $('a.show-menu').click(function() {
  $('header nav').slideToggle();
  });
  });

http://jsfiddle.net/5FZmd/

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

引用slideLogge（）

jQuery UI扩展了jQuery本机toggleClass以采用第二个可选参数：duration

toggleClass( class, [duration] )

文件。

相关文章：