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

Question

我有一个简单的 2 div，包含内容和 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 需要打开并且button1 需要删除 class .active，button2 需要获取 class .active，反之亦然！

display/hide 完成 fadeIn/Out 动画非常重要！

两个 div 都应该默认关闭！

Answer 1

也许你会喜欢这样的东西。我正在检查 div 是否可见。如果是这样，那么我切换 fade 和 active class。希望这对您有所帮助。

$(".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>

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

How to display and hide 2 div with jquery using if statement?

html

javascript

jquery

display