✔ Wo steckt der Fehler in diesem Script?

D

Djingeringe

Mitglied
Hallo Leute,

ich muss euch nochmal stressen. Ich habe hier schon vor ein paar Tagen einen Tread eröffnet zum Thema "DropDown Menue".

http://www.tutorials.de/tutorials211060.html

Alles Schön und gut, nur funktioniert etwas nicht und ich finde den Fehler nicht. Nach stundenlangem herumgesuche, ist es wohl am Besten wenn ich nochmal bei euch nachfrage bevor mir der Kopf platzt :) Für euch ist das sicher nur höchsten 5 Minuten Arbeit, davon 4,5 Minuten Quellcode anschauen :)

Wenn man auf "Über uns" klickt, öffnet sich ein Untermenue, klickt man wiederrum auf einen der Kategorien, öffnen sich die dazugehörigen Themen. Ist das Menue geöffnet und man wählt eine andere Kategorie oder den Menuepunkt "Training & Ausbildung", so schließt sich das noch offene Menue und das geklickte öffnet sich.

So soll es auch sein, aber wenn ich auf eine Kategorie bei "Training & Ausbildung" klicke und danach die andere Kategorie anklicke, will sich die schon offene nicht schließen.

Da ich von JavaScript Programmierung sehr wenig verstehe, wäre es super wenn jemand in kurzen Worten erklären könnte was ich falsch gemacht habe und warum es so nicht funktionieren kann, damit ich's für das nächste mal weiß.


Danke im vorraus

(siehe Anhang)
 

Anhänge

  • klick_menue.zip
    1,5 KB · Aufrufe: 24
Lässt sich schwer sagen, denn deine angehängte ZIP-Datei funktioniert nicht.
 
Zuletzt bearbeitet von einem Moderator:
Komisch! Welches Entpackprogramm nutzt Du denn? Ich habe es mir WinRar gepackt und musste die Dateiendung auf .zip ändern, da ich eine .rar nicht hochladen kann. Einfach mal versuchen die Dateiendung in .rar zu ändern. Ich füge aber sicherheithalber noch den Quelltext hier ein, falls es nicht funktionieren sollte.


Hier der HTML-Code mit dem Script:

HTML: 
 <html> 
<head> 
<title>Klick Menü</title> 
 
<link href="layout.css" rel="stylesheet" type="text/css"> 
</head> 
 
 
<script type="text/javascript"> 
<!-- 
function open_close_sub (id) 
{ 
if (document.getElementById(id).style.display == 'block') 
{ 
document.getElementById(id).style.display='none'; 
} 
else 
{ 
document.getElementById('sub_master1').style.display='none'; 
document.getElementById('sub_master2').style.display='none'; 
 
document.getElementById(id).style.display='block'; 
} 
} 
function open_close_thema (id, parent) 
{ 
var sub_master1 = new Array ('sub1_thema1','sub1_thema2','sub1_thema3'); 
var kategorie2 = new Array ('sub2_thema1','sub2_thema2','sub2_thema3'); 
 
if (document.getElementById(id).style.display == 'block') 
{ 
document.getElementById(id).style.display='none'; 
} 
else 
{ 
if (parent == 'sub_master1') 
{ 
for (j=0; j<sub_master1.length; j++) 
{ 
document.getElementById(sub_master1[j]).style.display='none'; 
} 
 
document.getElementById(id).style.display='block'; 
} 
if (parent == 'sub_master2') 
{ 
for (j=0; j<sub_master2.length; j++) 
{ 
document.getElementById(sub_master2[j]).style.display='none'; 
} 
 
document.getElementById(id).style.display='block'; 
} 
} 
} 
//--> 
</script> 
<body> 
 
 
 
 
 
<div id='master1' onClick="open_close_sub('sub_master1')"> Über uns</div> 
<div id='sub_master1' style='display:none;'> 
 
 
<div id='sub1_master1' class='sub' onClick="open_close_thema('sub1_thema1', 'sub_master1')">Unser Rollenverständnis</div> 
<div id='sub1_thema1' name='thema_sub1' style='display:none;'> 
 
<div class='thema'><a href='#'>Thema 1</a></div> 
<div class='thema'><a href='#'>Thema 2</a></div> 
</div> 
 
 
 
 
<div id='sub2_master1' class='sub' onClick="open_close_thema('sub1_thema2', 'sub_master1')">Unsere Kompetenzen & Erfahrungen</div> 
<div id='sub1_thema2' style='display:none;'> 
 
<div class='thema'><a href='#'>Thema 1</a></div> 
<div class='thema'><a href='#'>Thema 2</a></div> 
</div> 
 
 
 
<div id='sub3_master1' class='sub' onClick="open_close_thema('sub1_thema3', 'sub_master1')">Unsere Dienstleistungen</div> 
<div id='sub1_thema3' style='display:none;'> 
 
<div class='thema'><a href='#'>Thema 1</a></div> 
<div class='thema'><a href='#'>Thema 2</a></div> 
</div> 
 
</div> <!-- Ende div: sub_master1 --> 
 
 
 
 
 
 
<div id='master2' onClick="open_close_sub('sub_master2')">Training & Ausbildung</div> 
<div id='sub_master2' style='display:none;'> 
 
 
 
<div id='sub1_master2' class='sub' onClick="open_close_thema('sub2_thema1', 'sub_master2')">Gesprächsführung& 
Verhandeln</div> 
<div id='sub2_thema1' name='thema_sub2' style='display:none;'> 
 
 
 
<div class='thema'>Gesprächsführung Classics</div> 
<div class='thema'>Haltung zeigen – Stellung beziehen – Positionen 
klären</div> 
<div class='thema'>Argumentieren & Verhandeln</div> 
<div class='thema'>Projektmanager, Anwälte, Betriebsräte; Führungskräfte</div> 
<div class='thema'>Rhetorik</div> 
<div class='thema'>Rhetorische Dialektik</div> 
<div class='thema'>Verbale Schlagfertigkeit und Umgang mit Kampfrhetorik</div> 
<div class='thema'>Gespräche, Diskussionen und Meetings leiten</div> 
</div> 
 
 
 
 
 
<div id='sub2_master2' class='sub' onClick="open_close_thema('sub3_thema1', 'sub_master2')">Arbeitsmethoden 
und -techniken</div> 
<div id='sub3_thema1' style='display:none;'> 
 
 
 
<div class='thema'>Moderations-Methode</div> 
<div class='thema'>Die besten Meetings-Methoden</div> 
<div class='thema'>Techniken des Projektmanagement</div> 
<div class='thema'>Prioritätenmanagement</div> 
<div class='thema'>Mindmapping</div> 
<div class='thema'>Kreativitätstechniken</div> 
<div class='thema'>Selbst- und Zeitmanagement</div> 
</div> 
 
 
 
</body> 
</html>




Und hier die CSS-Datei:

HTML: 
div { 
width: 200px; 
cursor: default; 
left: 210px; 
top: 140px; 
z-index: 2; 
} 
 
#master1 { 
position: relative; 
margin: 10px 0px 0px 10px; 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: Black; 
text-align: right; 
padding-right: 20px; 
padding-bottom: 3px; 
} 
#master2 { 
position: relative; 
margin: 0px 0px 0px 10px; 
border-bottom-width: 1px; 
border-bottom-color: Black; 
border-bottom-style: solid; 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: Black; 
text-align: right; 
padding-right: 20px; 
border-top-color: Black; 
border-top-style: solid; 
border-top-width: 1px; 
padding-top: 3px; 
padding-bottom: 3px; 
} 
.sub { 
position: relative; 
margin: 0px 0px 0px 10px; 
background-color: Fuchsia; 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-weight: bold; 
color: Black; 
text-align: right; 
padding-right: 20px; 
padding-top: 3px; 
padding-bottom: 3px; 
} 
.thema { 
position: relative; 
margin: 0px 0px 0px 10px; 
background-color: #E7F3E3; 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size: 10px; 
font-weight: bold; 
color: Teal; 
text-align: right; 
padding-right: 20px; 
padding-bottom: 4px; 
padding-top: 3px; 
}

Danke
 

Anhänge

  • klick_menue.zip
    1,5 KB · Aufrufe: 18
Djingeringe hat gesagt.:
Welches Entpackprogramm nutzt Du denn?
Zum Vergrößern anklicken....
WinZip 8.0


Hier der korrigierte Source-Code:

HTML: 
<html>
<head>
<title>Klick Men&uuml;</title>

<link href="layout.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
<!--
function open_close_sub (id)
{
if (document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display='none';
}
else
{
document.getElementById('sub_master1').style.display='none';
document.getElementById('sub_master2').style.display='none';

document.getElementById(id).style.display='block';
}
}
function open_close_thema (id, parent)
{
var sub_master1 = new Array ('sub1_thema1','sub1_thema2','sub1_thema3');
var sub_master2 = new Array ('sub2_thema1','sub2_thema2');

if (document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display='none';
}
else
{
if (parent == 'sub_master1')
{
for (j=0; j<sub_master1.length; j++)
{
document.getElementById(sub_master1[j]).style.display='none';
}

document.getElementById(id).style.display='block';
}
if (parent == 'sub_master2')
{
for (j=0; j<sub_master2.length; j++)
{
document.getElementById(sub_master2[j]).style.display='none';
}

document.getElementById(id).style.display='block';
}
}
}
//-->
</script>

</head>
<body>

<div id='master1' onClick="open_close_sub('sub_master1')"> &Uuml;ber uns</div>
<div id='sub_master1' style='display:none;'>

<div id='sub1_master1' class='sub' onClick="open_close_thema('sub1_thema1', 'sub_master1')">Unser Rollenverst&auml;ndnis</div>
<div id='sub1_thema1' name='thema_sub1' style='display:none;'>

<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>

<div id='sub2_master1' class='sub' onClick="open_close_thema('sub1_thema2', 'sub_master1')">Unsere Kompetenzen & Erfahrungen</div>
<div id='sub1_thema2' style='display:none;'>

<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>

<div id='sub3_master1' class='sub' onClick="open_close_thema('sub1_thema3', 'sub_master1')">Unsere Dienstleistungen</div>
<div id='sub1_thema3' style='display:none;'>

<div class='thema'><a href='#'>Thema 1</a></div>
<div class='thema'><a href='#'>Thema 2</a></div>
</div>

</div> <!-- Ende div: sub_master1 -->


<div id='master2' onClick="open_close_sub('sub_master2')">Training & Ausbildung</div>
<div id='sub_master2' style='display:none;'>

<div id='sub1_master2' class='sub' onClick="open_close_thema('sub2_thema1', 'sub_master2')">Gespr&auml;chsf&uuml;hrung&
Verhandeln</div>
<div id='sub2_thema1' name='thema_sub2' style='display:none;'>

<div class='thema'>Gespr&auml;chsf&uuml;hrung Classics</div>
<div class='thema'>Haltung zeigen – Stellung beziehen – Positionen
kl&auml;ren</div>
<div class='thema'>Argumentieren & Verhandeln</div>
<div class='thema'>Projektmanager, Anw&auml;lte, Betriebsr&auml;te; F&uuml;hrungskr&auml;fte</div>
<div class='thema'>Rhetorik</div>
<div class='thema'>Rhetorische Dialektik</div>
<div class='thema'>Verbale Schlagfertigkeit und Umgang mit Kampfrhetorik</div>
<div class='thema'>Gespr&auml;che, Diskussionen und Meetings leiten</div>
</div>

<div id='sub2_master2' class='sub' onClick="open_close_thema('sub2_thema2', 'sub_master2')">Arbeitsmethoden
und -techniken</div>
<div id='sub2_thema2' style='display:none;'>

<div class='thema'>Moderations-Methode</div>
<div class='thema'>Die besten Meetings-Methoden</div>
<div class='thema'>Techniken des Projektmanagement</div>
<div class='thema'>Priorit&auml;tenmanagement</div>
<div class='thema'>Mindmapping</div>
<div class='thema'>Kreativit&auml;tstechniken</div>
<div class='thema'>Selbst- und Zeitmanagement</div>
</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

[ editpost ] Diese 'Komponenten' habe ich im Source-Code korrigiert:

Script-Code
Code: 
var sub_master2 = new Array ('sub2_thema1','sub2_thema2');
HTML-Source
Code: 
<div id='sub2_master2' class='sub' onClick="open_close_thema('sub2_thema2', 'sub_master2')">Arbeitsmethoden
und -techniken</div>
<div id='sub2_thema2' style='display:none;'>
 
Zuletzt bearbeitet von einem Moderator:
@ michaelsinterfaceDanke, dass Du dir die Mühe gemacht hast. Dann auch noch so früh am Morgen und an einem Samstag :)

Ich verstehe nicht, warum Du die Datei nicht mit WinZip öffnen konntest. Kommt das Programm nicht mit RAR-gepackten Dateien klar? Eigentlich sollte das doch funktionieren.





Gruß
 
Djingeringe hat gesagt.:
@ michaelsinterfaceDanke, dass Du dir die Mühe gemacht hast. Dann auch noch so früh am Morgen und an einem Samstag
Zum Vergrößern anklicken....
>>> Bitte markiere deine beantworteten Fragen als "Erledigt"! Thanx ;-]

Djingeringe hat gesagt.:
Ich verstehe nicht, warum Du die Datei nicht mit WinZip öffnen konntest. Kommt das Programm nicht mit RAR-gepackten Dateien klar? Eigentlich sollte das doch funktionieren.
Zum Vergrößern anklicken....
Offensichtlich nicht, aber ist auch nicht tragisch, da du ja den Source-Code gepostet hast ;-]
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück