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/

编辑：

要添加字体粗体粗体，只需做同样的事情并链接另一个 .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>