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

时间:2013-10-12 17:19:18

标签: javascript html css toggle

嘿伙计们,我希望能够在点击时在“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();
        });
    });

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

您可以切换活动类:

在你的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/

答案 2 :(得分:1)

$(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及其工作代码