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

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

4回复

div内容在第一次点击时不会改变

我在更改div的内容时遇到问题。 我先进行ajax调用,并从服务器接收JSON数组。 到现在为止还挺好。 然后,我想将几​​个div的内容更改为我从服务器收到的内容。 问题在于,第一次单击时内容不会更改。 每次检查Fiddler并在代码中都可以得到正确的响应后,响应就可以了。 但是,
4回复

禁用点击后的最后一次点击

我有django模板,如下所示: jQuery代码片段如下: 因此,我想从单击的表行中获取data-member-id 。 有了这个代码,我得到的是is,那很好,但是问题是如果单击table row 的最后一个td ,我想阻止它。 如果单击了最后一个,则执行其他操作。 因此,如果
2回复

除了第一次,jQuery对象永远不会改变

我遇到了一个我正在尝试修改的对象的问题。 该对象具有一定数量的密钥,格式为key_yyyy-mm-dd 。 当某些输入字段失去焦点时,我会触发一个修改对象的函数。 这个功能如下: .no_hotel是触发函数的文本框,它们还提供了我想要放在对象中的值。 现在,假设我在第一个文本框中
2回复

如何防止最后一次点击事件触发?

我需要防止最后一个li元素的click事件。 我尝试如下 但这是行不通的。 如果遇到同样的问题,请发布您的答案。 提前致谢 !!!
1回复

删除最后一次点击的跨度图标

问题 我试图仅在最后单击的span.highlight上隐藏Font Awesome“加号”图标,并在不具有active类的情况下将其显示在span.highlight上,但现在它正在删除两个span.highlight上的图标,并且不显示在添加活动类后,将其关闭。 JSFiddle:
3回复

jQuery代码在点击时不会改变

为什么单击时此代码未更改?
1回复

为什么触发点击不会改变标签导航?

这是我想通过代码控制的导航 这是我尝试切换到第二个标签的方法: DEMO 什么都没发生。 如何切换?
2回复

仅触发一次点击

有一个测验插件,单击“下一步”按钮后,提交答案。 我希望在单击答案后立即触发它。 我设法触发了一次点击,但是它点击了所有问题。 如何使其仅单击一次? 我的密码 html