Wo steckt der Fehler in diesem Script? @ tutorials.de: Tutorials, Forum & Hilfe

Djingeringe · 02.07.05 06:18

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)

Maik · 02.07.05 07:40

Lässt sich schwer sagen, denn deine angehängte ZIP-Datei funktioniert nicht.

Djingeringe · 02.07.05 07:52

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-Code:

 <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-Code:

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

Maik · 02.07.05 08:41

Zitat von Djingeringe

Welches Entpackprogramm nutzt Du denn?

WinZip 8.0

Hier der korrigierte Source-Code:

HTML-Code:

<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 :

1	var [color=red]sub_master2[/color] = new Array ('sub2_thema1','sub2_thema2');

HTML-Source

Code :

1
2
3

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

Djingeringe · 02.07.05 09:33

@ 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ß

Maik · 02.07.05 12:37

Zitat von Djingeringe

@ michaelsinterfaceDanke, dass Du dir die Mühe gemacht hast. Dann auch noch so früh am Morgen und an einem Samstag

>>> Bitte markiere deine beantworteten Fragen als "Erledigt"! Thanx

Zitat von Djingeringe

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.

Offensichtlich nicht, aber ist auch nicht tragisch, da du ja den Source-Code gepostet hast

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Welche Technik steckt hinter diesem Bild?

Welche Technik steckt hinter diesem Logo?

Was steckt hinter diesem Effekt?

Wo steckt der Fehler?

Wo steckt der Fehler

E-Mail:

Abonnieren Abbestellen