javascript - 使用 animate.css - jQuery 使用多个按钮切换多个 div

Question

我有三个不同的按钮和三个不同的 div，每个按钮都在同一个地方切换一个适用的 div。尝试做两件事。

1. 在相对 .app-div 显示时在 .app-icon 按钮上添加类，以便我可以在事件时添加背景颜色。
2. 在打开和关闭相同的 .app-div 时添加 animate.css 效果，这样当 div 消失时它会向下滑动，而不是突然消失。

HTML:

<a href="#" class="app-icon"><i class="fa fa-calculator" aria-hidden="true"></i></a>
<a href="#" class="app-icon"><i class="fa fa-sun-o" aria-hidden="true"></i></a>
<a href="#" class="app-icon"><i class="fa fa-rss" aria-hidden="true"></i></a>

<div class="app-div">
content div 1
</div>

<div class="app-div">
content div 2
</div>

<div class="app-div">
content div 3
</div>

jQuery:

$('.app-icon').click(function() {
  var index = $(this).index();
  $('.app-div').eq(index).toggle().siblings('.app-div').hide();
});

//animate.css effect
$('.app-div').addClass('animated fadeInUp');

这是我目前拥有的:https://jsfiddle.net/frshjb373/a5osx7y6/3/

Answer 1

一个选项是处理 if 语句来检查单击的图标是否实际上是事件的，如下所示:

$('.app-icon').click(function() {
  var index = $(this).index();
  if($(this).hasClass('active')) {
     $(this).removeClass('active');
     $('.app-div').eq(index).addClass('fadeOutDown')
  } else {
     $('.app-icon').removeClass('active');
     $(this).addClass('active')
     $('.app-div').hide().eq(index).show().removeClass('fadeOutDown')
  }
});

---

Updated Demo