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 
$(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 に答える
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;
}

jsフィドル

于 2013-10-12T17:26:12.933 に答える