当我选择框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;
}

样品小提琴

===============>>#1 票数:3

简单得多:

现场演示

$('.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/

===============>>#2 票数:1 已采纳

检查这个小提琴

如果有该类,则基本上需要删除它。

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

===============>>#3 票数:1

非常简单的解决方案。 只需使用.toggleClass('yellow black') toggleClass()将为您处理所有事情。 设置的以空格分隔的列表中的所有类都将被清除,反之亦然。 要只影响最后一个.bb ,可以将其放入自己的处理程序中:

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

演示

  ask by olo translate from so

未解决问题?本站智能推荐: