Toggle funktion??

[Fr3ddy]

Ich habe shcon eine funktionierende toggle funktion, das problem ist, ich habe zwei divs/buttons mit der selben klasse, die die funktion ausführen lässt. Die funktion sorgt dafür, das ein div größe und wieder kleiner wird nach erneutem klick.
Aber wenn ich auf button a klicke, wird das div größer, klicke ich danach auf button b passiert nichts, erst nach dem zweiten klick funktioniert es, kann man das irgend wie ändern?

$(function(){
    $(".auto_drop_down").toggle(function() {
            $("#map_wrapper").animate({
                        width: "100%",
                        height: "50px"
                    }, 300 );
                    
                },
                
                function () {
                    $("#map_wrapper").animate({
                            width: "100%",
                            height: vp_height 
                            }, 300 );
    });
});

LG & Danke

 

[Sempervivum]

Das Problem liegt wahrscheinlich daran, dass Du zwei Buttons hast. Das Wesen der Toggle-Funktion ist ja, dass beim Aktivieren desselben Buttons abwechselnd die eine und die andere Funktion ausgeführt wird.
Viele Grüße - Ulrich

 

[Fr3ddy]

Ja ich weis aber der zweite button ist halt gefordert -.-

 

[Sempervivum]

Wenn das so ist, ist die Toggle-Funktion wahrscheinlich fehl am Platze und es ist besser, für jeden Button einen eigenen Eventhändler zu definieren.

 

[Fr3ddy]

Das habe ich auch schon befürchtet, mit eventhändler meinst du was genau, bin noch net so firm bei js.

 

[Sempervivum]

Klingt hochtrabend, ist aber mit jQuery ganz einfach:
.click() – jQuery API

 

[Fr3ddy]

Es ist halt wichtig, das beide buttons, jeweils öffnen und schließen beherrschen und gleich bzw syncron sind, funktioniert das mit "click"?

 

[Sempervivum]

Ach so, beide sollen Öffnen und Schließen beherrschen und synchroniert sein. Finde ich etwas daneben, diese Forderung. Wer hat dir denn diese Aufgabe gestellt? Viel besser wäre es, wenn ein Button öffnet und der andere schließt. Wenn Du es unbedingt so haben musst, muss man wahrscheinlich selber etwas entwickeln. Vielleicht kann ich es im Laufe des Abends machen.

Eine Möglichkeit könnte sein, beide Buttons in einen Kontainer zu legen und die Toggle-Funktion auf diesen Kontainer zu legen, also nicht mit Klassenname, sondern mit ID:

$("#container_id").toggle(function() {

 

[Fr3ddy]

Die idee hat ich auch schon aber die buttons sind sehr weit von einander weg. Ja ich habe auch shcon gesagt, das diese funktionalität nicht die beste ist aber naja.

 

[Sempervivum]

OK, ich sehe mal, ob ich heute Abend so etwas machen kann.

 

[Fr3ddy]

Das wäre ja cool

 

[Sempervivum]

Probier's mal so:

$(function(){
    $(".auto_drop_down").click(function() {
        if ($("#map_wrapper").data("status"))
            {
                $("#map_wrapper").animate({
                        width: "100%",
                        height: "50px"
                    }, 300 );
                 $("#map_wrapper").data("status", true);       
            }
            else
            {
                 $("#map_wrapper").animate({
                         width: "100%",
                         height: vp_height 
                         }, 300 );
                 $("#map_wrapper").data("status", false);
            }    
    });
});

Ungetestet, wenn es nicht funktioniert, dann stell es online und poste den Link.
Viel Erfolg und viele Grüße - Ulrich

 

[Fr3ddy]

Funktioniert leider nicht, firebug zeigt auch keine js fehler. Kann dir die seite leider nicht zeigen, da es in einem intranet ist.

 

[Sempervivum]

Da ist mir ein Fehler unterlaufen. Es muss so aussehen:

$(function(){
    $(".auto_drop_down").click(function() {
        if ([b]![/b]$("#map_wrapper").data("status"))

also mit Ausrufezeichen im if.

 

[Fr3ddy]

Super, danke :)