teddy: jQuery toogle() und Ausgangsstatus abfragen

hallo!

ich verwende folgendes script um mit JQuery ein div innerhalb eines li tags ein bzw. auszublenden.

$("ul.faq > li > a").toggle( function(){  
		$(this).parent().children("div").show("slow");  
		this.style.backgroundImage = "url('minus.gif')";  
	}, function(){  
		$(this).parent().children("div").hide("slow");  
		this.style.backgroundImage = "url('plus.gif')";  
	}  
);  

wie lässt sich nun aber abfragen, ob das div element bereits eingeblendet ist oder nicht? toggle() führt immer zuerst die erste, dann die zweite funktion aus, unabhängig davon ob das div-tag eingeblendet ist. wenn ich nun ein bestimmtes div-tag im vorfeld einblende (normalerweise sind alle ausgeblendet) muss ich den button natürlich zweimal klicken bevor sich was tut.

wer kann helfen?

danke ted

  1. hallo!

    ich verwende folgendes script um mit JQuery ein div innerhalb eines li tags ein bzw. auszublenden.

    $("ul.faq > li > a").toggle( function(){

      $(this).parent().children("div").show("slow");  
      this.style.backgroundImage = "url('minus.gif')";  
    

    }, function(){
    $(this).parent().children("div").hide("slow");
    this.style.backgroundImage = "url('plus.gif')";
    }
    );

    
    >   
    > wie lässt sich nun aber abfragen, ob das div element bereits eingeblendet ist oder nicht? toggle() führt immer zuerst die erste, dann die zweite funktion aus, unabhängig davon ob das div-tag eingeblendet ist. wenn ich nun ein bestimmtes div-tag im vorfeld einblende (normalerweise sind alle ausgeblendet) muss ich den button natürlich zweimal klicken bevor sich was tut.  
    >   
    > wer kann helfen?  
      
    Sicher, dass du toggle richtig benutzt? Der API nach ([Effects/toggle](http://docs.jquery.com/Effects/toggle), [UI/Effects/toggle](http://docs.jquery.com/UI/Effects/toggle)) anscheinend nicht.
    
    -- 
    Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.  
      
    Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:| 
    
    1. Du verwechselst .toggle() ohne Parameter mit dem Event-Helper .toggle(fn1, fn2), der multiple Clicks erfaßt und auf die beiden Funktionen verteilt.

      Mein Tip an den Fragesteller: nehme statt toggle das Klick-Event!

      $([Selektor]).click(function() {  
         if ($(this).toggleClass('plus').hasClass('plus')) {  
             [Show]  
         } else {  
             [Hide]  
         }  
      });
      

      Und ergänze das entsprechende CSS um die Klasse plus, welche das Hintergrundbild austauscht.

      Gruß, LX

      --
      X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
      X-Will-Answer-Email: Unusual
      X-Please-Search-Archive-First: Absolutely Yes
      1. Du verwechselst .toggle() ohne Parameter mit dem Event-Helper .toggle(fn1, fn2), der multiple Clicks erfaßt und auf die beiden Funktionen verteilt.

        Stimmt, aber nur aufgrund der uneinheitlichen jQuery-Dokumentation. Die Events/toggle-Seite trägt absurderweise den Titel "A" und wird daher bei der Suche nach toggle nicht bei Article Title Matches aufgeführt, sondern in den Page Text Matches.

        --
        Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
        Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|
  2. Hi,

    wie lässt sich nun aber abfragen, ob das div element bereits eingeblendet ist oder nicht?

    Entweder Du speicherst den Zustand in einem Flag, oder Du fragst die css-Eigenschaft display ab und handelst enstsprechend.

    toggle()

    ... ist dazu da zwischen selectierten elementen zu wechseln, $(p).toggle() würde also die display-Eigenschaft aller p-tags abwechselnd switchen, es gibt ein paar parameter, um das zu steuern. Nutze also besser click().

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. Hi,

      oder Du fragst die css-Eigenschaft display ab und handelst enstsprechend.

      Dafür gibts bei jquery übrigens das:
      $([selector]).css("display");

      ...aber das gute, alte document.getElementById(id).style.display tut's auch ;-)

      Gruesse, Joachim

      --
      Am Ende wird alles gut.