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的回调来在动画完成后切换“red”类，因此您确定具有正确的面板状态。

它应该会顺利进行，但有时在快速连续点击元素时会发生奇怪的事情。这种方法可以确保无效状态自动修复，因此更具防御性。

Updated fiddle (2)

在切换上添加和删除类

1 个答案: