Padding von div beeinflussen (jQuery)?

[Stev3]

Hi,

ich habe mir aus verschiedenen schnipseln dieses script zusammengebaut:

$('.trigger').not('.trigger_active').next('.toggle_container').hide();
$('.trigger').click( function() {
    var trig = $(this);
    if ( trig.hasClass('trigger_active') ) {
        trig.next('.toggle_container').slideToggle('slow');
        trig.removeClass('trigger_active');
    } else {
        $('.trigger_active').next('.toggle_container').slideToggle('slow');
        $('.trigger_active').removeClass('trigger_active');
        trig.next('.toggle_container').slideToggle('slow');
        trig.addClass('trigger_active');
    };
    return false;
});

Mit dieser html struktur:

<div class="group">
<div class="item1">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item2">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item3">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item4">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
</div>
<div class="group">
<div class="item5">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item6">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item7">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item8">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
</div>

Wie kann ich es nun bewerkstelligen, wenn das akkordion runter scollt das das übergeordnete div mit der klasse "group" ein padding-bottom bekommt von der höhe des divs "trigger_container"?

LG

 

[kkapsner]

Die https://api.jquery.com/slideToggle/ hat einen zweiten Parameter: ein Callback, der gefeuert wird, wenn die Animation fertig ist - da drin kannst du die Höhe des Containers auslesen und das padding-bottom setzten.

ABER ich verstehe nicht ganz, für was du das padding-bottom brauchst - ich habe das Gefühl, dass dein Problem durch ein suboptimales CSS erzeugt wird.

 

[Stev3]

Ich habe versucht meine funktion zu erweitern aber irgend was stimmt immer noch nicht, die höhe wird im html nicht angegeben aber hinter group steht schon mal ein " style="" ", allerdings jetzt hinter allen group klassen und nicht nur hinter der eltern klasse.

$('.trigger').not('.trigger_active').next('.toggle_container').hide();
                $('.trigger').click( function() {
                    var trig = $(this);

                    if ( trig.hasClass('trigger_active') ) {
                        trig.next('.toggle_container').slideToggle('slow');
                        trig.removeClass('trigger_active');
                        
                        $(".group").css({'height':($(".trigger_content").height()+'px')});


                    } else {
                        $('.trigger_active').next('.toggle_container').slideToggle('slow');
                        $('.trigger_active').removeClass('trigger_active');
                        trig.next('.toggle_container').slideToggle('slow');
                        trig.addClass('trigger_active');
                        
                        $(".group").css({'height':($(".trigger_content").height()+'px')});
                    };

                return false;
                });

http://jsfiddle.net/kfcgg/2/embedded/result/

 

[kkapsner]

Das ist ja auch nicht im Callback und außerdem setzt du height und nicht padding-bottom...

ABER wenn du ein gescheites CSS verwendest, brauchst du das gar nicht und der Browser macht alles für dich: Edit fiddle - JSFiddle

 

[Stev3]

Danke aber der inhalt ist leider absolut positioniert, damit er über die ganze breite geht, deshalb kann er die klasse "group" nicht aufschieben.

 

[Stev3]

Ich habe es jetzt in die richtige callback eingebaut aber es ist momentan immer noch das selbe ergebnis:

$('.trigger').not('.trigger_active').next('.toggle_container').hide();
                $('.trigger').click( function() {
                    var trig = $(this);

                    if ( trig.hasClass('trigger_active') ) {
                        trig.next('.toggle_container').slideToggle('slow',function () {
                            $(".group").css({'height':($(".trigger_content").height()+'px')});

                            });
                        trig.removeClass('trigger_active');



                    } else {
                        $('.trigger_active').next('.toggle_container').slideToggle('slow',function () {
                            $(".group").css({'height':($(".trigger_content").height()+'px')});

                        });
                        $('.trigger_active').removeClass('trigger_active');
                        trig.next('.toggle_container').slideToggle('slow');
                        trig.addClass('trigger_active');

                    };

                return false;
                });

 

[kkapsner]

Danke aber der inhalt ist leider absolut positioniert, damit er über die ganze breite geht, deshalb kann er die klasse "group" nicht aufschieben.

Diese Aussage verstehe ich nicht. Warum muss etwas absolut positioniert werden, wenn es über eine ganze Breite gehen soll? In deinem Fiddle ist es ja auch nicht absolut positioniert...

PS: es gibt kein Element mit der Klasse "trigger_content"...

 

[Stev3]

Danke für den tip.

ICh habe mal mein fiddle aktualisiert:
Edit fiddle - JSFiddle

Der slide down effekt soll so sein wie hier, wenn man auf einen rucksack klickt, dass sich alles was unten ist, runter schiebt:
https://www.google.de/search?q=deut...ELMY&biw=1338&bih=818#spd=8284384789092236407

 

[kkapsner]

OK - so einen Effekt wird du mit dieser Callback-Funktion nicht erreichen können, da sie nur ein einziges Mal ausgeführt wird: wenn die Animation fertig ist. Dazu musst du entweder ein gescheites CSS verwenden, das das automatisch für dich macht, oder du versuchst padding-bottom synchron mit der Höhe des Kontainers zu animieren...

 

[Stev3]

Ah ok und gibt es so eine function, die das syncron macht?

 

[kkapsner]

Nicht, dass ich wüsste... ich verstehe immer noch nicht, warum du absolut positionierte Elemente brauchst.

 

[Stev3]

Um den wrapper_hidden_content eine breite zu geben, das er von ganz links über dan gesamten bereich nach ganz rechts verläuft.

 

[kkapsner]

Ach so... wenn du dein HTML nicht ändern möchtest (wegen Semantik und so...), kannst du mit JS ein Darstellungselement erstellen, das die richtigen Eigenschaften besitzt: Edit fiddle - JSFiddle

 

[Stev3]

Danke ich habe auch noch mal etwas gebaut:
Edit fiddle - JSFiddle

Allerdings öffnen sich jetzt alle "group" div und nicht nur das parent

 

[kkapsner]

Naja - in der globalen (das ist nicht wirklich dein Ernst...) Variable "nav" sind einfach alle ".group"-Elemente drin und nicht nur das, was du gerne hättest. Da musst du in der navOpen() das richtige raussuchen.

 

[Stev3]

Hi, habe das mit einem bekannten zusammen gebaut, er meinte er hat da etwas mehr ahnung als ich, war gerade am überlegen ob ich das so lösen könnte: $(this).closest('.group') aber so funktioniert dann nix mehr.
http://jsfiddle.net/kfcgg/31/

 

[kkapsner]

Das darfst du natürlich nicht in der globalen Variable machen. Die ist sowieso keine kluge Idee... prinzipiell nicht.

In der navOpen() musst du vom thisSubmenu das nächste ".group" nehmen.