последний ребенок щелчок не меняется

Question

Когда я выбираю коробку 2, я хочу, чтобы граница стала черной.
Еще один щелчок должен вернуться к желтому.

Первый щелчок идет вправо, но второй щелчок остается черным. Я могу исправить это, добавив еще один класс, но я этого не хочу.

Как еще я могу это сделать?

Это мой код:

<div class="aa"> 
    <div class="bb">1</div> 
    <div class="cc"></div> 
</div> 
<div class="aa"> 
    <div class="bb">2</div> 
    <div class="cc"></div> 
</div> 

$('.bb:last').addClass('yellow'); 

$('.bb').click(function() { 
    $(this).next('.cc').fadeToggle(); 

    if (!$('.cc:last').is(':hidden')) { 
     $('.bb:last').addClass('black'); 
    } else { 
     $('.bb:last').removeClass('black'); 
     $('.bb:last').addClass('yellow'); 
    } 
}); 

.bb { 
    background:red; 
    width:90px; 
    height:30px 
} 

.cc { 
    background:blue; 
    width:90px; 
    height:30px; 
    display:none; 
} 

.yellow { 
    border:3px solid yellow; 
} 
.black { 
    border:3px solid black; 
} 

Образец fiddle

Answer 1

Проверить это fiddle

Вам в основном нужно удалить класс, если он есть.

$('.bb:last').addClass('yellow'); 

$('.bb').click(function() { 
    $(this).next('.cc').fadeToggle(); 
    if (!$('.cc:last').is(':hidden')) { 
     if ($('.bb:last').hasClass('black')) { 
      $('.bb:last').removeClass('black'); 
     } else { 
      $('.bb:last').addClass('black'); 
     } 
    } else { 
     $('.bb:last').addClass('yellow'); 
    } 
}); 

Answer 2

Намного проще:

LIVE DEMO

$('.bb:last').addClass('yellow'); 
$('.bb').click(function(e) { 
    $(this).next('.cc').fadeToggle(); 
    if(e.target == $('.bb:last')[0]) 
     $(this).toggleClass('yellow black'); 
}); 

http://api.jquery.com/hasClass/
http://api.jquery.com/toggleClass/

Answer 3

Очень простое решение. Просто используйте .toggleClass('yellow black'). toggleClass() позаботится обо всем для вас. Любой класс в списке, разделяемом пробелом, будет очищен, и наоборот. Для того, чтобы воздействовать только на последний .bb вы могли бы поставить его в его собственном обработчике:

$('.bb:last').addClass('yellow').click(function() { 
    $(this).toggleClass('yellow black'); 
}); 
$('.bb').click(function() { 
    $(this).next('.cc').fadeToggle(); 
}); 

DEMO