javascript/CSS Element Sichtbar bzw. unsichtbar machen

Ein wenig umgekehrte Logik hilft:

HTML: 
<!doctype html>
<html>
<head>
<title>toggletest</title>
<script>
function nix(){};
function toggleDiv(str){
   var elem = document.getElementById(str);
/*
    Egal welchen Wert es hat, selbst wenn es undefiniert ist, so lange es nicht 'none' ist, mache es zu 'none', 
    wenn es 'none' ist, mache es zu 'block' 
*/
   elem.style.display = (elem.style.display != 'none') ? 'none' : 'block'; 
}
</script>
</head>
<body>
	<p>
		<a href="javascript:nix();" onclick="toggleDiv('SubCat1');">hide</a>
	</p>
	<div id="SubCat1">
		Test Test Test Test
	</div>
</body>
</html>
Funktioniert hier wie gewünscht. Manche Browser setzen für die JS Eigenschaften keine default Werte ein und das verwirrt arme Scripte(r wie mich) schon einmal :)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>toggletest</title>
		<script type="text/javascript">
		function nix(){};
		function toggleDiv(o_Link, theId){
			var elem = document.getElementById(theId);
			if(elem){		
				elem.style.display = (elem.style.display != 'none')?'none':'block'; 
				if( typeof( o_Link.innerHTML ) != 'undefined' ) {
					o_Link.innerHTML = (o_Link.innerHTML != 'show') ? 'show':'hide';
				}
			}
			return;
		}
		</script>
	</head>
	<body>
		<p>
			<a href="javascript:nix();" onclick="toggleDiv(this,'SubCat1');">toggle</a>
		</p>
		<div id="SubCat1">
			SubCat1
		</div>
		<p>
			<a href="javascript:nix();" onclick="toggleDiv(this,'SubCat2');">toggle</a>
		</p>
		<div id="SubCat2">
			SubCat2
		</div>
	</body>
</html>
 
Zuletzt bearbeitet:
Hi.

OK ich habe es jetzt in beiden Varianten probiert, allerdings immer der gleiche Fehler, beim 1ten Klick passiert nicht, erst ab dem 2ten Klick.
 
Ich kann das nicht nachvollziehen, ich habe es gerade noch ein Mal mit Ch , Fx, IE und Op ausprobiert und bei allen klappt das Beispiel so wie es ist beim ersten Klick ...

Irgend welche Erweiterungen installiert, die evtl. den ersten Klick abfangen könnten?

Noch irgendwas am Code verändert?

edit: ich habe oben mal eine Dummy Funktion eingebaut, evtl. mag Deine Konfiguration ja void im link nicht...
 
Zuletzt bearbeitet:
mein Code sieht so aus:

index.html
HTML: 
<head>
        <link rel="stylesheet" href="stylesheet-main.css" type="text/css">
        
        <!-- Laden der Scripts -->
        <script type="Text/Javascript" src="scripts/scriptarchiv.js">
</head>

<body>
<a href="#" onclick="return toggleMe('SubCat1'); return false">Musik</a>

 <div class="NavCatSub" id="SubCat1">
                            <a href="">Alternative Rock</a> <br> <hr>
                            <a href="">Hardrock</a> <br> <hr>
                            <a href="">Metal</a>
                        </div>
</body>

stylesheet-main.css:

HTML: 
.NavCatSub {
    position: absolute;
    left: 275px;
    display: block;
    
    z-index: 4;
    
    width: 200px;
    
    padding-top: 10px;
    padding-left: 10px;
    
    border-style: groove;
    border-width: 1px;
    border-left-style: none;
    border-color:#1C1E20;
    
    -webkit-border-top-right-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius-topright: 25px;
    -moz-border-radius-bottomright: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    
    background-color: #acd6fc;
    }

#SubCat1 {
    
    top: 148px;
    height: 225px;
    display: none;
    }

scriptarchiv.js:
HTML: 
function toggleMe(item){
		  var e=document.getElementById(item);
		  if(!e)return true;
		  if(e.style.display=="none"){
			e.style.display="block"
		  } else {
			e.style.display="none"
		  }
		  return true;
		}


Getestet hab ich es in Opera v11.60, Chrome v16.0, FF v9.0, Safari 5.1.2 und IE 9 - immer das selbe, zuerst passiert nix, ab dem 2ten Klick gehts...

Irgend welche Erweiterungen installiert, die evtl. den ersten Klick abfangen könnten?
Zum Vergrößern anklicken....
WENN, dann nur im Chrome, selbst da wüsst ich nicht welche - alle anderen sind OOTB nur zum testen da.
 
Ich frage mich, warum ich schon 2 Mal anderen Code geposted habe, wenn Du immer wieder Deinen eigenen nimmst.
Toggle Test für alle die es ausprobieren wollen.
 
Also auf deiner Testseite passiert gar nix.

Ich hab derzeit wieder meinen Code, da deiner bisher leider keine änderung gebracht hat.


Das auf deiner HP sieht SEHR gut aus, ich werd mal versuchen das nachzubauen.
 
Wenn sich auf meiner Seite nichts tut, dann hast Du irgendwo noch einen heimlichen Scriptblocker laufen. Sie wurde getestet mit Chrome, Firefox, IE7-9, Konqueror, Opera und Safari unter Windows, soweit möglich auch unter Linux und bei allen funktionierte es auf den ersten Klick.

Schon mal geschaut, ob nicht doch evtl. ein Proxy oder eine Firewall Software quer schießt - oder ein Web Guard oder wie auch immer sich dieser Kram nennt, der mit manchen AV Programmen mitkommt?
 
Hmmmm, naja, Proxy gibt es keinen, Firewall ist nur die Windows-Eigene aktiv, und der Virenscanner ist MicrosoftSecurityEssentials.

Nach meinem Urlaub kann ich es auf nem Linux-PC sowie nem MAC testen.

Nur so interessenhalber, gibt es die Möglichkeit, ein script in´s OnMouseOver eines DIV´s zu legen?
Ich stell mir das so vor, beim über div1 Mausover ist wird subcat1 für 10sek. sichtbar.
hättest du da was in petto?

Danke & LG
 
Zuletzt bearbeitet:
Ich habe nun die Lösung!

Da das element per externen CSS-Stylesheet auf display: none gesetzt wird, greift das JS beim ersten mal nicht.

mit folgendem Script jedoch geht es ;)

HTML: 
/* 
ToggleDiv = DIV ein/ausblenden
*/
function nix(){};
		function toggleDiv(o_Link, theId){
			var elem = document.getElementById(theId);
			if(elem){		
				elem.style.display = (elem.style.display == 'block')?'none':'block'; 
			}
			return;
		}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben