div ein/ausblenden Problem

[creamycewie]

Hi,


ich hab folgendes Script, um die DIV mit der ID "SubCat1" ein/auszublenden.

     function Sub1Show() {
                    if(document.getElementById('SubCat1').style.display=='block')
                {document.getElementById('SubCat1').style.display='hidden';}

                else (document.getElementById('SubCat1').style.display=='hidden')
                {document.getElementById('SubCat1').style.display='Block';}
                }

Beim 1. Klick erscheint die Ebene zwar, aber beim 2ten verschwindet sie nicht mehr.

Wo liegt hier der Fehler?

Danke & LG

Creamy

 

[CPoly]

Du hast "block" einmal groß geschrieben. So viele Zeilen Code sind das ja nicht, dass man das nicht sieht ;-)

Edit: "hidden" ist übrigens auch kein gültiger Wert. Nimm "none".

 

[creamycewie]

Hi, ich habe jetzt folgendes Script im Einsatz, es funktioniert soweit, doch erst ab dem 2ten klick.
beim 1. Klick passiert gar nix.


Script:

/* 
ToggleDiv = DIV ein/ausblenden
*/
function nix(){};
		function toggleDiv(o_Link, theId){
			var elem = document.getElementById(theId);
			if(elem){		
				elem.style.display = (elem.style.display != 'none')?'none':'block'; 
			}
			return;
		}

Aufruf

<a href="javascript:nix();" onclick="toggleDiv(this,'SubCat1');">

woran kann das liegen?

Danke & LG

 

[CPoly]

Bei mir funktioniert das http://jsfiddle.net/aRpuz/

Ist "SubCat1" ein Block-Element? Wenn nicht, dann hat die display-Eigenschaft z.B. den Wert "inline-block" oder "inline" und deshalb funktioniert der Code erst nach dem zweiten Klick.

 

[creamycewie]

Hi, nein, es ist ein div, welches per Stylesheet mit display: hidden; versehen ist.

 

[Quaese]

Hi,

CPoly hat doch weiter oben schon erwähnt, dass hidden kein gültiger Wert für die Eigenschaft display ist.

Ciao
Quaese

 

[wollmaus]

Hi, nein, es ist ein div, welches per Stylesheet mit display: hidden; versehen ist.

elem.style gibt keine Infos über Styles, die per Stylesheet zugewiesen wurden.

Angenommen, standardmäßig sind alle betroffenen div's ausgeblendet, ändere die Bedingung:

elem.style.display = (elem.style.display == 'block')?'none':'block';

Beim ersten Klick trifft die Bedingung nicht zu( elem.style.display hat keinen Wert), das Element wird auf 'block' gesetzt.

Bei weiteren Klicks kann elem.style.display korrekt ermittelt und der gewünschte Wert zugewiesen werden .

Sollte die Annahme(standardmäßig sind alle div's ausgeblendet) nicht zutreffen, wäre eine einfacher Workaround, die Eigenschaft offsetHeight des Elementes als Bedingung heranzuziehen.

Diese sollte 0 sein wenn das Element per display:none ausgeblendet wurde.(jQuery bspw. nutzt diese einfache Methode um zu ermitteln ob ein element ":visible" ist, denn ein Element kann sehr gut ausgeblendet sein, ohne daß sein display "none" ist, bspw. wenn sein Elternelement ausgeblendet ist.)

elem.style.display = (elem.offsetHeight)?'none':'block';