如何使用 if 语句使用 jquery 显示和隐藏 2 div?

Question

我有一个简单的 2div 内容和 2 个按钮：

<div id="div1"></div>
<div id="div2"></div>
<i class="button1"></i>
<i class="button2"></i>

$(".button1").click(function() {
$("#div1").fadeToggle();
$(".button1").toggleClass("active");
});
$(".button2").click(function() {
$("#div2").fadeToggle();
$(".button2").toggleClass("active");
});

我想要实现的是，如果div1 已经打开并且我按下按钮 2，div1 需要关闭，div2 需要打开，按钮 1 需要删除类 .active，按钮 2 需要获得类 .active，反之亦然！

使用淡入/淡出动画完成显示/隐藏非常重要！

默认情况下，两个div 都应该处于关闭状态！

Answer 1

也许你想要这样的东西。我正在检查div是否可见。如果是这样，那么我切换fade和active类。希望这有所帮助。

$(".button1").click(function() {
if($("#div2").is(':visible')){
$("#div2").fadeToggle();
$(".button2").toggleClass("active");
}
$("#div1").fadeToggle();
$(".button1").toggleClass("active");
});
$(".button2").click(function() {
if($("#div1").is(':visible')){
$("#div1").fadeToggle();
$(".button1").toggleClass("active");
}
$("#div2").fadeToggle();
$(".button2").toggleClass("active");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" style="display:none">Div 1 Stuff</div>
<div id="div2" style="display:none">Div 2 Stuff</div><br/>
<i class="button1">Icon1</i>
<i class="button2">Icon2</i>