jquery - 加载时隐藏，单击时添加一个类，然后再单击另一个类切换

Question

我有一个导航，我想在加载时隐藏它。

然后，我想在单击带有 class="nav-btn" 的导航时向该导航添加一个“bounceIn”类

初始点击后，我希望它在“bounceIn”和“bounceOut”类之间切换

目前我刚刚完成了这项工作，它会在点击时反弹并删除bounceIn并添加bounceOut（忽略动画类）。

$(document).ready(function() {

  $('nav').addClass('animated bounceIn');

  $("nav").click(function () {
      $(this).removeClass('bounceIn');
      $(this).addClass('bounceOut');
  });

});

如何轻松实现我的需求？

Answer 1

你可以使用toggleClass方法。

$('.nav-btn').click(function () {
    $('nav').toggleClass('bounceIn bounceOut');
});