javascript - 最后一次子点击没有改变

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

更简单:

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/