jQuery父类更改的子级

jQuery child of parent class change?

本文关键字：父类 jQuery 更新时间：2023-12-24

我正在使用FontAwesome，并且在我的手风琴中有一个图标。所以，我有一个加号图标和一个减号图标。当类变成"活动头"时，我希望它只更改h2的图标。我只是不知道该怎么做，这是我的小提琴；密码

检查我的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;

我确实认为这件事应该和家长一起做。孩子，但我真的不确定该怎么做。

---编辑---

减号图标的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-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').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

您应该在代码中查看一些内容，将您使用的一些元素保存到变量中，并对代码进行某种清理是非常有意义的。上面的答案是有效的，但是您还应该考虑优化代码的性能。

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/

试试这个：

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