1

嘿伙计们，我希望能够在单击时在文本“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();
        });
    });
4

3 回答 3

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

于 2013-10-12T17:26:12.933 回答
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/

于 2013-10-12T17:29:10.403 回答
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

于 2013-10-12T17:32:26.667 回答