最后一个孩子点击不变

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(); 
}); 

​​