Javascript 父类更改的jQuery子类？

我用的是真棒，手风琴里有个图标。所以，我有一个加号图标和一个减号图标。当类成为“活动头”时，我希望它只更改该h2的图标。我只是不知道怎么做，这是我的小提琴和代码

我确实认为它将与.parent和.child一起完成，但我不确定如何进行

---编辑---

减号图标的I代码为：

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

试试看

演示：

尝试：

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-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;

---

在你的代码中有几件事你应该注意，把你使用的一些元素保存到变量中，并对代码进行一些清理是很有意义的。上面的答案是有效的，但是您还应该考虑优化代码以提高性能

JS:

希望这是有用的

---

这里有一个小提琴来显示它的工作代码：：

这是一个很好的选项，但在再次切换时不会替换图标。我不会反对投票，因为它很有帮助。其他人投了反对票，不是我。这也是一个不错的选择，但在第一位家长的原始焦点上没有负图标。但从一个非常好的选择开始，我不会否决投票，因为这仍然是一个很好的答案。（向上投票）没有必要（在css中）添加负号，只需对jQuery进行更改，它就能完美地启动。这是最可接受的答案，因为它还在原始父对象的焦点（页面加载时）上启动了“减号”图标。另外，现在我知道了查找函数！非常感谢你！但图标的更改不起作用。你有没有一个很好的链接，可以让我真正了解这种做事风格。它长得多，但更干净。图标类只需要反转。就这种编码风格而言，有几个地方可以开始。从David Crockford的“JavaScript好的部分”开始。我喜欢做的是看看业界顶尖的开发人员是如何做的，并试着找出他们为什么这么做。另外，只要更长、更干净、更容易阅读，就会赢得胜利，从现在起6个月后，当你必须进行更新时，这些例子中哪一个最容易阅读。此外，长度不应该是一个问题，因为在将代码发布到生产环境之前，您希望缩小代码。是的，您需要更好的分离，现在您的选择器将获取页面上的每个标题和内容，并影响它们，您需要将它们隔离到一个容器中，然而，为了能够在它们上使用相同的函数，您需要创建一个工厂函数来返回单个accordian实例，下面是一个JSFIDLE，其中有一个多实例的工作示例：：Woah，它变得更复杂了。。我真的必须深入研究这一点才能更好地理解。谢谢你的评论，我很感激。

$('.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();

$('.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;

$('.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;

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');
    }
});