✔ Aufklappliste schliessen

G

Godstyle

Erfahrenes Mitglied
Hallo,

ich wünsche euch erstmal einen recht schönen Abend.
Ich versuche mich derzeit an JS und komme nicht so ganz weiter, daher frage ich euch mal um hilfe.
Zunächst einmal das Script wo es hapert:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
</head>
<body>
<style type="text/css">
	li {
		list-style-type: none;
	}
	ul {
		margin: 0px;
		padding-top: 0px;
		padding: 5px;
	}
</style>


<script type="text/javascript">
function switchlayer(Layer_Name)
{
  var GECKO = document.getElementById? 1:0 ;
  var NS = document.layers? 1:0 ;
  var IE = document.all? 1:0 ;

  if (GECKO)
       {document.getElementById(Layer_Name).style.display=
	   (document.getElementById(Layer_Name).style.display=='block') ? 'none' : 'block';}
  else if (NS)
       {document.layers[Layer_Name].display=(document.layers[Layer_Name].display==
	   'block') ? 'none' : 'block';}
  else if (IE)
       {document.all[Layer_Name].style.display=(document.all[Layer_Name].style.display==
	   'block') ? 'none' : 'block'; }


}
</script>

<ul>
 <li><a href="" onclick="javascript:switchlayer('Main'); return false;">Main</a></li>
  <ul id="Main" style="display:none"></li>
	  

  <li><a href="" onclick="javascript:switchlayer('Chaos'); return false;">Sub1</a></li>
   <ul id="Chaos" style="display:none">
    <li>SubSub1.1 </li>
    <li>SubSub1.2 </li>
    <li>SubSub1.3</li>
   </ul></li>
 	
  <li><a href="" onclick="javascript:switchlayer('IG'); return false;">Sub2</a></li>
   <ul id="IG" style="display:none">
    <li>SubSub2.1</li>
    <li>SubSub2.2</li>
   </ul>

  <li><a href="" onclick="javascript:switchlayer('SM');return false;">Sub3</a></li>
   <ul id="SM" style="display:none">
    <li>SubSub3.1</li>
    <li>SubSub3.2</li>
   </ul>
  </ul>
</ul>


</body>
</html>

Es funktioniert, das sich die Punkte öffnen wenn ich sie anklicke, nun möchte ich, das wenn ich Sub 1 angeklickt habe und anschlesen Sub 2 anklicke, sich sub 1 wieder schliese, so das immer nur von einem Sub die Subsub Punkte angezeigt werden.

Ich hoffe ich konnte mich verständlich ausdrücken und es weilt jemand unter uns der mir helfen kann und möchte.

glg Godstyle
 
Versuchs mal hiermit. Ist ganz schick. Ist n beitrag von dreamer von dieser Seite.

HTML: 
<html>
<head>

<script type="text/javascript">
GECKO = document.getElementById? 1:0 ;
NS = document.layers? 1:0 ;
IE = document.all? 1:0 ;

function haupt(untermenue)
{
var hauptmenues = new Array('ferrari','lamborghini','porsche');

for (var menue in hauptmenues)
{
var das_menue = hauptmenues[menue];
if (GECKO) {document.getElementById(das_menue).style.display = 'none';}
else if (NS) {document.layers[das_menue].style.display = 'none';}
else if (IE) {document.all[das_menue].style.display = 'none';}
}

aufklappen(untermenue);
}

function aufklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'block';}
else if (NS) {document.layers[untermenue].style.display = 'block';}
else if (IE) {document.all[untermenue].style.display = 'block';}
}

function zuklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'none';}
else if (NS) {document.layers[untermenue].style.display = 'none';}
else if (IE) {document.all[untermenue].style.display = 'none';}
}
</script>

</head>
<body>

<ul>
<li><a href="untermenue.php" onMouseOver="haupt('ferrari');" onClick="zuklappen('ferrari');return false;"Ferrari</a></li>
<ul id="ferrari" type="circle" style="display:none;">
<li>F355 Spider</li>
<li><a href="untermenue.php" onMouseOver="aufklappen('pferdestaerke');" onClick="zuklappen('pferdestaerke');return false;">F40</a></li>
<ul id="pferdestaerke" style="display:none;">
<li>500 PS</li>
<li>600 PS</li>
<li>700 PS</li>
</ul>
<li>Maranello</li>
<li>Testarossa</li>
</ul>
<li><a href="untermenue2.php" onMouseOver="haupt('lamborghini');" onClick="zuklappen('lamborghini');return false;">lamborghini</a></li>
<ul id="lamborghini" type="circle" style="display:none;">
<li>Diablo</li>
</ul>
<li><a href="untermenue2.php" onMouseOver="haupt('porsche');" onClick="zuklappen('porsche');return false;">Porsche</a></li>
<ul id="porsche" type="circle" style="display:none;">
<li>Roadster</li>
<li>911</li>
</ul>
</ul>

</body>
</html>

Hoffe, das es dir weiterhilft.

Gruß, Adnan
 
hallo Psychodelics,

ich danke für deinen Lösungsansatz,
ich habe dein script zunächst so getestet, dabei viel mir auf das es:

<li>Maranello</li>
<li>Testarossa</li>

komplett ignoriert, weiter habe ich inMouseOver gegen onClick ersetzt, dies funktioniert auch soweit.
Nun ist es jedoch so, das ich nicht nur mit 2 sub erbeiten möchte sondern mit mindestens 10, die jeweils mindestens 5 unterpunkte heben werden.

Bsp:

Felgen
keskin
MAN
Artec

Reifen
Dunlop
Bridgestone

Karosserie
Stoßstangen
Leuchten
Spoiler

usw.

Diese daten werden später aus einer Datenbank ausgegeben dies schaffe ich dann selbst, mir geht es nur um das Grundscript worauf ich aufbauen kann.

Es Wäre also nur der JS befehl womit ich die geöffneten sub wieder schliesen kann sobald ich ein anderes auswähle.
 
Ich habe noch etwas ähnliches gefunden was die funktion fast hat die ich suche:

Code: 
<html>
<head>
<script type="text/javascript" language="JavaScript1.2">
var angezeigt = false;

function versteckt(divid) 
{ 
    if (angezeigt)
    {
        document.getElementById('versteckt1').style.display = 'none';
        document.getElementById('versteckt2').style.display = 'none';
        angezeigt = false;
    }
    else
    {
        document.getElementById(divid).style.display = 'block';
        angezeigt = true;
    }
} 
</script>
</head><body>
<a href="#" onclick="versteckt('versteckt1')"><p class="contenttitel">Link 1</p></a>
<div id="versteckt1" style="display:none">
Ich bin versteckter Inhalt 1
</div>

<a href="#" onclick="versteckt('versteckt2')"><p class="contenttitel">Link 2</p></a>
<div id="versteckt2" style="display:none">
Ich bin versteckter Inhalt 2
</div>  
</body>
</html>

hier ist nur das problem, das wenn ich den 2ten link auswähle, der ersta aber noch aktiv ist, er nur das fensterschliest und bei erneutem klicken erst öffnet.
Weiterer nachteil ist, das es zuweit auseinander ist und einer navigation nicht mehr ähnlich sieht durch die abstände, da die links direkt untereinander stehen sollen und beim klicken nach unten schieben.

das es möglich ist weiß ich da ich es vor Jahren mal gemacht habe und es war mit ul und li tags.
 
Hey, versuch's mal bitte so. Ist nicht sehr elegant gelöst, aber kurz und knapp^^

HTML: 
<html>
<head>
<script type="text/javascript" language="JavaScript1.2">

function versteckt(divid) 
{ 
		document.getElementById('versteckt1').style.display = 'none';
        	document.getElementById('versteckt2').style.display = 'none';
        	document.getElementById('versteckt3').style.display = 'none';
        	document.getElementById('versteckt4').style.display = 'none';

		document.getElementById(divid).style.display = 'block';
} 
</script>
</head><body>
<a href="#" onclick="versteckt('versteckt1')"><div class="contenttitel">Link 1</div></a>
<div id="versteckt1" style="display:none">
Ich bin versteckter Inhalt 1</div>

<a href="#" onclick="versteckt('versteckt2')"><div class="contenttitel">Link 2</div></a>
<div id="versteckt2" style="display:none">
Ich bin versteckter Inhalt 2</div>  

<a href="#" onclick="versteckt('versteckt3')"><div class="contenttitel">Link 3</div></a>
<div id="versteckt3" style="display:none">
Ich bin versteckter Inhalt 3</div>  

<a href="#" onclick="versteckt('versteckt4')"><div class="contenttitel">Link 4</div></a>
<div id="versteckt4" style="display:none">
Ich bin versteckter Inhalt 4</div>  
</body>
</html>

Hoffe, dass es dir jetzt was bringt:-) Hab den Quellcode gerade noch ein wenig verbessert
 
Zuletzt bearbeitet:
Super, so hab ich mir das vorgestellt, wenn du mir nun noch sagen könntest, wie es aussehen müsste wenn ich einen 3punkt einstelle.
Kenne mich mit js so gut wie gar nicht aus, wäre dir da also noch sehr dankbar, ab dann werde ich die anderen punkte selbst einstellen, denke das ich es dann ableiten kann.
Von der funktion und dem aussehen her ist es exakt das was ich gesucht habe, dafür schon einmal recht herzlichen dank.
 
Hey,

hab den Quellcode gerade nochmal oben angepasst. Da sind jetzt 4 Menüunkte und du kannst einfach so viele hinzufügen, wie du möchtest.

Was aktuell nicht geht, ist das wieder zuklappen, bei einem zweiten Klick, wenn du das brauchst, kann ich dir das auch machen, denke ich.

Kannst unter meinen Beiträgen auf "Danke!" klicken, wenn sie dir geholfen haben:-)
 
Zuletzt bearbeitet:
Hey,

das ist zu 100% das was ich gesucht habe, ich weiß gar nicht, wie ich dir dafür danken soll, bekommst natürlich eine bewertung, nun kann ich in aller ruhe die DB dahinter setzen und dann hab ich endlich wieder was worauf ich aufbauen kann.

super lieben dank.

glg Godstyle
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück