单击/切换时更改div的背景

Question

嘿伙计们，我希望能够在单击时在“CLICK ME”文本后面添加背景，因此它会一直保持活动状态，直到被点击为止。 我目前有一个幻灯片和切换格式，这里显示，但我无法弄清楚我可以在当前脚本中添加另一个活动类的位置。

http://jsfiddle.net/schermerb/rAMQT/

    <div class="toggleBtn">CLICK ME</div>
    <div class="below">OH NO IM HIDDEN</div>

    <div class="toggleBtn">CLICK ME</div>
    <div class="below">OH NO IM HIDDEN</div>

    <div class="toggleBtn">CLICK ME</div>
    <div class="below">OH NO IM HIDDEN</div>

    <div class="toggleBtn">CLICK ME</div>
    <div class="below">OH NO IM HIDDEN</div>

.toggleBtn {
    font:14px noral Futura, sans-serif;
    color:black;
    margin:50px;
}
.below {
    background:red;
}

    $(document).ready(function () {
        var content = $('.below').hide();
        $('.toggleBtn').on('click', function () {
            $(this).next('.below').slideToggle();
            return false;
        });
        //register the handler to button element inside .below
        $('.below .close').on('click', function () {
            //find the ancestor .below element of the clicked button
            $(this).closest('.below').slideToggle();
        });
    });

Answer 1

这样做：将活动类添加到单击的元素中。 并且当slideToggle完成删除此类时;

使用Javascript

$(document).ready(function () {
    var content = $('.below').hide();
    $('.toggleBtn').on('click', function () {
        var self = this;
        $(this).addClass("active");
        $(this).next('.below').slideToggle(function(){
            $(self).removeClass("active");
        });
        return false;
    });
    //register the handler to button element inside .below
    $('.below .close').on('click', function () {
        var self = this;
        $(this).addClass("active");
        //find the ancestor .below element of the clicked button
        $(this).closest('.below').slideToggle(function(){
            $(self).removeClass("active");
        });
    });
});

CSS

.active {
    background-color: blue;
}

的jsfiddle

Answer 2

您可以切换活动类：

在你的JS中:( 注意$（this）.toggleClass（'active'）行）

$('.toggleBtn').on('click', function () {
    $(this).next('.below').slideToggle();

    $(this).toggleClass('active');
    return false;
});

CSS：

.toggleBtn.active{
    background:blue;   
}

http://jsfiddle.net/rAMQT/3/

Answer 3

$(document).ready(function () {
    var content = $('.below').hide();
    $('.toggleBtn').on('click', function () {
        $(this).next('.below').slideToggle();
        if ( $( this ).hasClass( 'active' )){
            $(this).removeClass('active');
        }else{
            $(this).addClass('active');
        }
        return false;
    });
    //register the handler to button element inside .below
    $('.below .close').on('click', function () {
        //find the ancestor .below element of the clicked button
        $(this).closest('.below').slideToggle();
    });
});

这是带有工作代码的JSFIDDLE