✔ javascript klapp menü - erweitern

J

JamesT

Erfahrenes Mitglied
Hallo Leute,

also vorab kurz zu dem Javascript das ich benutze:

Code: 
<html>
<head>
<script type="text/javascript">
<!--

function show(divid) {
d=document;
d.getElementById("cat1").style.display="none";
d.getElementById("cat2").style.display="none";

d.getElementById(divid).style.display="inline";

}
//-->
</script>
</head>
<body>
<a href="#" onclick="show('cat1')">Printserver 1</a><br>
<div id="cat1" style="display:none">
	<a href="#">Info 1</a><br>
	<a href="#">Info 2</a><br>
	<a href="#">Info 3</a><br>
</div>
<br>
<a href="#" onclick="show('cat2')">Printserver 2</a><br>
<div id="cat2" style="display:none">
	<a href="#">Info 1</a><br>
	<a href="#">Info 2</a><br>
	<a href="#">Info 3</a><br>
</div>
</body>
</html>

Dieses Script wollte ich jetzt benutzen, allerdings würde ich es gern anpassen. Damit ich nicht im head jede einzelne ID eintragen muss, da diese aus einer Datenbank kommen.

Also auf meiner Seite wird hab ich an einer Stelle eine schleife die aus der Datenbank die informationen holt: (quellcode vereinfach)

Code: 
<?PHP
$test = @mysql_query("SELECT * FROM test WHERE pid ='$id'");
while ($infos = mysql_fetch_array($test)){
	$id = $infos['id'];
	$modell	 = $infos['modell'];
	$typ = $infos['typ'];?>
<table>
	<tr>
		<td>
		<a class="liste" href="#" onclick="show('<?PHP echo $id; ?>')">
			<span class="ps_typ"><?PHP echo $typ; ?>.</span>
			<span class="ps_modell"><?PHP echo $modell; ?></span>
		</a>
		</td>
	</tr>
	<tr>
		<td>
		<div id="<?PHP echo $id; ?>" style="display:none">
			Hier werden dann weitere Infos angezeigt
		</div>
		</td>
	</tr>
</table>
<?PHP } ?>

Wie bekomme ich es hin, das ich oben im head nicht für jede id welche ich habe ein

d.getElementById("1").style.display="none";
d.getElementById("2").style.display="none";
d.getElementById("3").style.display="none";
d.getElementById("4").style.display="none";
...

angeben muss?

ich hab es schon versucht mit d.getElementById(id).style.display="none";
aber das klappt nicht. Könnt ihr mir weiterhelfen?

Grüße

Jamest
 
Hallo zusammen,

Ich hab das javascript jetzt mal geändert:

Code: 
	<script type="text/javascript">
		var sichtbar = false;

		function show(id) 
		{ 
			if (sichtbar)
			{
				document.getElementById(id).style.display = 'none';
				sichtbar = false;
			}
			else
			{
				document.getElementById(id).style.display = 'inline';
				sichtbar = true;
			}
		} 
	</script>

Jetzt klappt das mit den IDs aber jetzt muss ich klicken um es aufzuklappen und nochmal klicken um es wieder zuzuklappen, das ist nicht so wie ich es gern hätte. :-)

Bei dem zuerst von mir genannten Javascript code ist es so wenn ich eins aufgeklappt ist, und ich klicke auf das nächste klappt das erste wieder zu und das andere auf.

Ich hoffe ihr könnt mir weiterhelfen

Grüße

Jamest
 
Hi,

wenn du es verallgemeinern willst, musst du dir ein Kriterium suchen, anhand dessen du die zusammengehörenden Info-DIVs identifizieren kannst. Dies könnte zum Beispiel ein Klassenname sein, der in allen Elementen enthalten ist.

Wird der onclick-Event im Link ausgelöst, ermittelt die Funktion zuerst das übergeordnete Tabellenelement und alle darin enthaltenen DIV-Elemente. Die DIVs werden anschliessend durchlaufen, geprüft, ob sie dem Klassennamenkriterium entsprechen und im Erfolgsfall ein- bzw. ausgeblendet.

Beispiel (Klassenname: toggle-info):
Code: 
<html>
<head>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function show(strID){
  // Suchmuster für Klassenname (hier: toggle-info)
  var strPattern = /\btoggle-info\b/;
  var objStart = document.getElementById(strID);

  var objTable = objStart.parentNode;

  // Übergeordnetes Tabellenelement ermitteln
  while(objTable.nodeName.toLowerCase() != "table"){
  	objTable = objTable.parentNode;
  }

  // Alle DIVs innerhalb der Tabelle ermitteln
  var arrDiv = objTable.getElementsByTagName("div");

  // Alle DIVs durchlaufen
  for(var i=0; i<arrDiv.length; i++){
    // Falls es sich um ein Info-Div handelt
    if((arrDiv[i].className.search(strPattern)!=-1)){
      // Falls es sich um die gewünschte Info handelt
      if(arrDiv[i].id == strID)
        arrDiv[i].style.display = (arrDiv[i].style.display=="block")? "none" : "block";
      else
        arrDiv[i].style.display = "none";
    }
  }
}
//-->
</script>
</head>
<body>
<table>
	<tr>
		<td>
		<a class="liste" href="#" onclick="show('id_1'); return false;">
			<span class="ps_typ">typ id_1</span><span class="ps_modell">modell id_1</span>
		</a>
		</td>
	</tr>
	<tr>
		<td>
		<div id="id_1" class="toggle-info" style="display:none">
			Hier werden dann weitere Infos angezeigt (1)
		</div>
		</td>
	</tr>
	<tr>
		<td>
		<a class="liste" href="#" onclick="show('id_2'); return false;">
			<span class="ps_typ">typ id_2</span><span class="ps_modell">modell id_2</span>
		</a>
		</td>
	</tr>
	<tr>
		<td>
		<div id="id_2" class="toggle-info" style="display:none">
			Hier werden dann weitere Infos angezeigt (2)
		</div>
		</td>
	</tr>
	<tr>
		<td>
		<a class="liste" href="#" onclick="show('id_3'); return false;">
			<span class="ps_typ">typ id_3</span><span class="ps_modell">modell id_3</span>
		</a>
		</td>
	</tr>
	<tr>
		<td>
		<div id="id_3" class="toggle-info" style="display:none">
			Hier werden dann weitere Infos angezeigt (3)
		</div>
		</td>
	</tr>
</table>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Perfekt Quaese,

eingebaut, ids angepasst und funktioniert wunderbar.
Ich kann jetzt sogar die tabellen mit einem klick wieder schliessen.

Ich danke dir echt vielmals.

Have a nice day.

Jamest
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück