Ich benutze FontAwesome und habe ein Symbol in meinem Akkordeon. Ich habe also ein Plus- und ein Minus-Symbol. Wenn die Klasse zu einem 'aktiven Header' wird, möchte ich, dass sie nur das Symbol dieses h2 ändert. Ich bin mir einfach nicht sicher, wie ich es machen soll, hier ist meine Geige und mein Code.

Überprüfe meine Geige!

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

Ich denke, dass es mit .parent & .child gemacht werden würde, aber ich bin mir nicht sicher, wie ich es anstellen soll.

---Bearbeiten---

Der I-Code für das Minus-Symbol lautet:

<i class="fa fa-minus"></i>
3
MrJustin 29 Nov. 2013 im 19:42

4 Antworten

Beste Antwort

Versuchen:

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;

Geige hier.

4
Hiral 29 Nov. 2013 im 16:02

Es gibt ein paar Dinge, die Sie in Ihrem Code beachten sollten. Es wäre sehr sinnvoll, einige der Elemente, mit denen Sie arbeiten, in Variablen zu speichern und den Code nur ein bisschen zu bereinigen. Die obigen Antworten funktionieren. Sie sollten sich jedoch auch mit der Optimierung Ihres Codes für die Leistung befassen.

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

Hoffe das ist nützlich!

Hier ist eine Geige, um zu zeigen, dass es sich um funktionierenden Code handelt: http://jsfiddle.net/kkemple/M32fa/ 7 /

2
kkemple 30 Nov. 2013 im 17:15

Versuchen

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

Demo: Fiddle

2
Arun P Johny 29 Nov. 2013 im 15:46

Versuche dies:

$('.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;
1
Praveen 29 Nov. 2013 im 15:51