1

当我选择 box2时，我希望边框变为黑色。
再次单击它应该回到黄色。

第一次单击正确，但第二次单击保持黑色。我可以通过添加另一个类来解决这个问题，但我不想这样做。

我还能怎么做？

这是我的代码：

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

样品小提琴

4

3 回答 3

3

简单得多：

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/

于 2013-04-17T23:10:40.060 回答
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');
    }
});
于 2013-04-17T23:01:44.103 回答
1

非常简单的解决方案。只需使用.toggleClass('yellow black'). toggleClass()会为你处理好一切。设置的空格分隔列表中的任何类都将被清除，反之亦然。要仅影响最后一个.bb，您可以将其放入它自己的处理程序中：

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

DEMO

于 2013-04-17T23:25:11.280 回答