javascript - 在切换时添加和删除类

Question

我正在尝试使用 .js 在颜色之间切换。我希望在关闭面板时颜色为红色，然后在打开面板时变为黑色。 Fiddle Here

HTML

<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>

CSS

.flip{ color: back; }
.panel,.flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel{ padding:50px; }
.red{ color: red; }

JS

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
       $(".flip").addClass("red");
  });
});

Answer 1

简单:

将 addClass("red") 更改为 toggleClass("red")，如下所示:

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
    $(".flip").toggleClass("red");
  });
});

Updated fiddle

防御:

可以说这种方法更好:

$(document).ready(function(){
  $(".flip").click(function(){
      $(".panel").slideToggle("slow", function(){
          $(".flip").toggleClass("red", $(".panel").is(":hidden"));
      });
  });
});

这是做什么的:它不只是切换状态，而是根据面板的可见性设置它。此外，它使用来自 slideToggle 的回调在动画完成后切换“红色”类，因此您可以确保面板处于正确的状态。

它应该会很顺利，但有时当一个元素被快速连续点击时会发生奇怪的事情。此方法可确保无效状态自动修复自身，因此更具防御性。

Updated fiddle (2)