javascript - 单击/切换时更改 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

您可以切换事件类:

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