【问题标题】：Toggle multiple divs with multiple buttons using animate.css - jQuery使用 animate.css 使用多个按钮切换多个 div - jQuery
【发布时间】：2016-09-22 15:54:05
【问题描述】：

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

在显示相对 .app-div 时在 .app-icon 按钮上添加类，以便我可以在活动时添加背景颜色。
在切换相同的.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/

【问题讨论】：

标签： javascript jquery css animate.css

【解决方案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

【讨论】：

正是我想要的！效果很好。

【解决方案2】：

不确定这是否是您正在寻找的（仅使用 animate.css 很难进行“无故障”切换）

$('.app-icon').click(function() {
  $('.app-icon.active').not(this).removeClass('active');
  var index = $(this).toggleClass('active').index();
  $('.app-div').eq(index).toggleClass('fadeInUp fadeOutDown').show().siblings('.app-div').removeClass('fadeInUp').addClass('fadeOutDown').hide();
});

并为.active 类应用样式

.app-icon.active{ color:green; }

JSFiddle

【讨论】：

【解决方案3】：

“addClass”和“removeClass”（最后两句）
我认为“.hide()”是问题所在，但您还需要为“fadeOutDown”效果添加和删除类。

试试这个：

$('.app-icon').click(function() {
  var index = $(this).index();
  if($('.app-div').eq(index).is(":visible"))
  {
    $('.app-div').eq(index).addClass('fadeOutDown').slideUp();
  }
  else
  {
    $('.app-div').eq(index).removeClass('fadeOutDown').slideDown().siblings('.app-div').slideUp();
  }
  $('.app-icon.current').removeClass("current");
  $(this).addClass("current");
});

编辑：要通过单击自身来删除当前类，您应该在 else 语句中移动 addClass("current")。这是一个工作演示https://jsfiddle.net/a5osx7y6/5/

【讨论】：

【解决方案4】：

这是对 Artur 回复的完美收尾

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 style="position: relative">
    <div class="app-div">
    content div 1
    </div>

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

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

CSS

.app-div {display: none; position: absolute; top: 0; left: 0;}
.app-icon .fa {transition: background-color 0.5s ease;}
.app-icon .fa:hover {background: #ccc;}
.app-icon.active {background: #CD87BA;}

JavaScript

$('.app-icon').click(function() {
  $('.app-icon.active').not(this).removeClass('active');
  var index = $(this).toggleClass('active').index();
  $('.app-div').eq(index).toggleClass('fadeInUp fadeOutDown').show().siblings('.app-div').removeClass('fadeInUp').addClass('fadeOutDown');
});

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

Working JSFiddle

【讨论】：