父类的jQuery子级更改？

Question

我正在使用 FontAwesome，我的手风琴中有一个图标。所以，我有一个加号图标和一个减号图标。当该类成为“活动标题”时，我希望它仅更改该 h2 的图标。我只是不确定该怎么做，这是我的小提琴和代码。

Check my Fiddle!

$('.accordion-header').toggleClass('inactive-header');

var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


$('.accordion-header').click(function () {
    if($(this).is('.inactive-header')) {
        $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }
    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
        $(this)
    }
});

return false;

我确实认为可以使用 .parent 和 .child 来完成，但我不确定如何去做。

---编辑---

减号图标的 I 代码是：

<i class="fa fa-minus"></i>

Answer 1

试试：

JS：

$('.accordion-header').toggleClass('inactive-header');  
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth }); 
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-header').first().find('.fa').toggleClass('fa-plus fa-minus');
$('.accordion-content').first().slideDown().toggleClass('open-content');    
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
    $('.active-header').find('.fa').toggleClass('fa-plus fa-minus');
    $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).find('.fa').toggleClass('fa-plus fa-minus');
        $(this).next().slideToggle().toggleClass('open-content');
    }
    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).find('.fa').toggleClass('fa-plus fa-minus');
        $(this).next().slideToggle().toggleClass('open-content');
        $(this)
    }
});

return false;

Fiddle here.

Answer 2

试试

$('.accordion-header').toggleClass('inactive-header');

var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({
    'width': contentwidth
});


$('.accordion-header').click(function () {
    if ($(this).is('.inactive-header')) {
        $('.active-header').toggleClass('active-header inactive-header').toggleClass('fa-plus fa-minus').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
        $(this).find('i').toggleClass('fa-plus fa-minus');
    } else {
        $(this).toggleClass('active-header inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
        $(this).find('i').toggleClass('fa-plus fa-minus');
    }
}).first().click();

演示：Fiddle

Answer 3

您应该在代码中查看一些内容，将您使用的一些元素保存到变量中并稍微清理一下代码会很有意义。上面的答案有效，但是您还应该考虑优化代码以提高性能。

JS：

var contentwidth = $('.accordion-header').width();

var accTitles = $( '.accordion-header' );
var accContents = $( '.accordion-content' );


accTitles
    .first()
    .addClass('active-header');

accContents
    .first()
    .slideDown( 300 )
    .addClass('open-content');


accTitles.on('click', function ( e ) {
    var self = $( this );

    if(self.hasClass('active-header')) {
        self
            .removeClass('active-header')
            .children('i')
            .removeClass('fa-minus')
            .addClass('fa-plus');
        self
            .next()
            .slideUp(300)
            .removeClass('open-content');
    }
    else {
        accContents
            .slideUp(300)
            .removeClass('open-content');

        accTitles
            .removeClass('active-header')
            .children('i')
            .removeClass('fa-minus')
            .addClass('fa-plus');

        self
            .addClass('active-header')
            .children('i')
            .removeClass('fa-minus')
            .addClass('fa-plus');
        self
            .next()
            .slideDown(300)
            .addClass('open-content');
    }
});

希望这有用！

这是一个显示它正在工作的代码 :: http://jsfiddle.net/kkemple/M32fa/7/

Answer 4

试试这个：

$('.accordion-header').toggleClass('inactive-header');

    var contentwidth = $('.accordion-header').width();
    $('.accordion-content').css({'width' : contentwidth });


    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
    $('.accordion-content').first().slideDown().toggleClass('open-content');


    $('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');

            $(this).parent().find('.inactive-header').find('.fa-minus').removeClass('fa-minus').addClass('fa-plus');
            $(this).find('.fa-plus').removeClass('fa-plus').addClass('fa-minus');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
        else {
            $(this).parent().find('.active-header').find('.fa-minus').removeClass('fa-minus').addClass('fa-plus');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
            $(this)
        }
    });

    return false;