jquery - クリックでテキストの色を変更

Question

Collapsible Group Item #1というテキストを、クリックして div が折りたたまれたときに赤色に変えたいのですが、どの方法が最適ですか?

ここに私の場合

http://jsfiddle.net/STqCF/66/

Answer 1

コールバックで .css メソッドを使用して、色を切り替えることができます

$('.accordion').collapse();

$('.accordion').on('show hide', function(e){
    var $sib = $(e.target).siblings('.accordion-heading');
    $sib.css('color','red').find('.accordion-toggle i').toggleClass('icon-arrow-down icon-arrow-up', 200);
    $sib.find('a.accordion-toggle').css('color',function(){
        return $(e.target).hasClass('in') ? 'red':'#08C';
    });
});

http://jsfiddle.net/STqCF/82/

編集：

font-weight bold も追加するには、同じことを行い、別の .css メソッドをチェーンします。

$('.accordion').on('show hide', function(e){
    var $sib = $(e.target).siblings('.accordion-heading');
    $sib.css('color','red').find('.accordion-toggle i').toggleClass('icon-arrow-down icon-arrow-up', 200);
    $sib.find('a.accordion-toggle').css('color',function(){
        return $(e.target).hasClass('in') ? 'red':'#08C';
    }).css('font-weight',function(){
        return $(e.target).hasClass('in') ? 'bold':'';
    });
});

より良い方法はcssクラスでそれを行うことですが..そしてそのクラスを切り替えます

$('.accordion').on('show hide', function(e) {
    var $sib = $(e.target).siblings('.accordion-heading');
    $sib.css('color', 'red').find('.accordion-toggle i').toggleClass('icon-arrow-down icon-arrow-up', 200);
    $sib.find('a.accordion-toggle').toggleClass('aCollapsed', $(e.target).hasClass('in'));
});​

http://jsfiddle.net/STqCF/112/

Answer 2

私のスタイルにもう少し適した別のソリューションを次に示します。

私はあなたの質問を少し解釈しようとしなければなりませんでした - あなたがやろうとしていることを正確に誤解していたら、私を許してください

これにより、展開されていない見出しに is-off クラスが追加され、展開された見出しに is-on クラスが追加されます。

http://jsfiddle.net/STqCF/111/

// Cache our jQuery objects so we don't have to fetch them repeatedly
var $accordion = $('.accordion'),
    $accordionHeadings = $accordion.find('.accordion-heading');

// Collapse the accordion initially
$accordion.collapse();

$accordion.on('show hide', function(e){
    $(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-arrow-down icon-arrow-up', 200);
});

// Bind an event to give an is-on state to the current headline and an is-off state to all other headlines
$('.accordion').on('show', function (e) {
    var $target = $(e.target);

    // Reset the class states - remove all is-ons and add is-offs
    $accordionHeadings.removeClass('is-on')
    $accordionHeadings.addClass('is-off');

    // For only the current item, add the is-on class and remove is-off
    $target.siblings('.accordion-heading')
        .addClass('is-on')
        .removeClass('is-off');
});

</p>