Добавление и удаление класса при переключении

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

Простой:

Chan GE 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)