estaminet: Menüprobleme

Moin Moin!
Ich versuche mich grad in Javascript reinzulesen,-denken, -lernen, aber ich häng einfach fest.
Ich hab ein Menü, das ich im Internet gefunden hab mal umgebastelt.
Nun hab ich aber das Problem, dass wenn ich auf Menüpunkt "Seite 6" oder "Seite 7" klicke und vorher schon Menüpunkt 1 oder 2 angeklickt habe, die oberen Menüpunkte nicht wieder zuklappen. Das wäre aber mein Wunsch.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html lang="de"><head>  
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">  
  <title></title>  
  
  
  
  <style type="text/css">  
  
.menutitle{  
cursor:pointer;  
margin-bottom: 5px;  
background-color:#FFFF99;  
color:#00008b;  
width:180px;  
padding:8px;  
  
text-align:center;  
font-weight:bold;  
/*/*/border:0px solid #000000;/* */  
}  
A {text-decoration: none;}  
A:Hover {text-decoration: underline;}  
  
.submenu{  
margin-bottom: 0.5em;  
}  
  </style>  
  
  <script type="text/javascript">  
  
  
var persistmenu="yes"  
var persisttype="sitewide"  
  
if (document.getElementById){  
document.write('<style type="text/css">\n')  
document.write('.submenu{display: none;}\n')  
document.write('</style>\n')  
}  
  
function SwitchMenu(obj){  
	if(document.getElementById){  
	var el = document.getElementById(obj);  
	var ar = document.getElementById("masterdiv").getElementsByTagName("span");  
		if(el.style.display != "block"){  
			for (var i=0; i<ar.length; i++){  
				if (ar[i].className=="submenu")  
				ar[i].style.display = "none";  
			}  
			el.style.display = "block";  
		}else{  
			el.style.display = "none";  
		}  
	}  
}  
  
function get_cookie(Name) {  
var search = Name + "="  
var returnvalue = "";  
if (document.cookie.length > 0) {  
offset = document.cookie.indexOf(search)  
if (offset != -1) {  
offset += search.length  
end = document.cookie.indexOf(";", offset);  
if (end == -1) end = document.cookie.length;  
returnvalue=unescape(document.cookie.substring(offset, end))  
}  
}  
return returnvalue;  
}  
  
function onloadfunction(){  
if (persistmenu=="yes"){  
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname  
var cookievalue=get_cookie(cookiename)  
if (cookievalue!="")  
document.getElementById(cookievalue).style.display="block"  
}  
}  
  
function savemenustate(){  
var inc=1, blockid=""  
while (document.getElementById("sub"+inc)){  
if (document.getElementById("sub"+inc).style.display=="block"){  
blockid="sub"+inc  
break  
}  
inc++  
}  
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname  
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid  
document.cookie=cookiename+"="+cookievalue  
}  
  
if (window.addEventListener)  
window.addEventListener("load", onloadfunction, false)  
else if (window.attachEvent)  
window.attachEvent("onload", onloadfunction)  
else if (document.getElementById)  
window.onload=onloadfunction  
  
if (persistmenu=="yes" && document.getElementById)  
window.onunload=savemenustate  
  
  </script>  
</head><body style="color: rgb(0, 0, 139); background-color: rgb(255, 140, 0);" alink="#ee0000" link="#00008b" vlink="#00008b">  
<br>  
  
<!-- Keep all menus within masterdiv-->  
<div style="background-color: rgb(255, 140, 0);" id="masterdiv">  
  
  
<div style="font-family: Arial; font-weight: normal;" class="menutitle" onclick="SwitchMenu('sub1')">1. Men&uuml;punkt<br>  
</div>  
<span style="font-family: Arial;" class="submenu" id="sub1">  
&nbsp;&nbsp;<a target="target01" href="seite_1.html">Seite 1</a><br>  
&nbsp;&nbsp;<a target="target01" href="seite_2.html">Seite 2</a>  
</span>  
<div style="font-family: Arial; font-weight: normal;" class="menutitle" onclick="SwitchMenu('sub2')">2. Men&uuml;punkt<br>  
</div>  
<span style="font-family: Arial;" class="submenu" id="sub2">  
&nbsp;&nbsp;<a target="target01" href="seite_3.html">Seite 3</a><br>  
&nbsp;&nbsp;<a target="target01" href="seite_4.html">Seite 4</a><br>  
&nbsp;&nbsp;<a target="target01" href="seite_5.html">Seite 5</a><br>  
</span>  
<div style="font-family: Arial; font-weight: normal;" class="menutitle" onclick="SwitchMenu('sub3')"><a href="l" target="target01">Seite 6</a></div>  
  
<div style="font-family: Arial; font-weight: normal;" class="menutitle" onclick="SwitchMenu('sub4')"><a href="seite_7.html" target="target01">Seite 7</a> </div>  
  
  
</body></html>  

Was muß ich umstricken? Wäre dankbar für einen Tipp.

Liebe Grüße
Esta

  1. Hallo,

    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }

    1. kein Mensch hat Lust so einen unformatierten JS-, CSS, HTML Salat zu durchforsten! Strukturiere erstmal, dann fällt dir eventuell auch die Fehlersuche leichter.
    2. Schlechtes Übungsbeispiel, weil Menus macht man mit CSS
    3. Nutze z.B. Firebug um nachzuvollziehen, was in deinem JS passiert. Da findest du genügend aktuelle Forumsnbeiträge.

    Viele Grüße
    Siri

      1. kein Mensch hat Lust so einen unformatierten JS-, CSS, HTML Salat zu durchforsten! Strukturiere erstmal, dann fällt dir eventuell auch die Fehlersuche leichter.

      Naja, fünf Minuten anschauen und man sieht das Problem :)

      @TE: Die für das Ein- und Ausblenden auschlaggebende Funktion ist, wie der Name schon sagt "function SwitchMenu(obj)". Das Problem bei den Menüpunkten 6 und 7 ist, dass es die Objekte mit den id's "sub3" und "sub4" nicht gibt und entsprechend der Teil des scripts

        
      if(el.style.display != "block"){  
          for (var i=0; i<ar.length; i++){  
             if (ar[i].className=="submenu") ar[i].style.display = "none";  
          }  
          el.style.display = "block";  
      }
      

      der die offenen Menüs schliesst nicht ausgeführt wird. Du müsstest also beispielsweise eine weitere if-Abfrage einbauen, die auch diesen Fall abdeckt oder obige anpassen.

      Anmerken möchte ich noch, dass die Funktion auch mMn nicht sonderlich hübsch ist.

        1. kein Mensch hat Lust so einen unformatierten JS-, CSS, HTML Salat zu durchforsten! Strukturiere erstmal, dann fällt dir eventuell auch die Fehlersuche leichter.

        Naja, fünf Minuten anschauen und man sieht das Problem :)

        Ich halte es in dem Fall einfach für keine gute Idee. Die gezeigte Seite scheint mir ein seeeehr altes Beispiel. Wenn der OP hätte verstehen wollen, was da passiert, dann hätte er sich zumindest die Mühe gemacht, alles sauber einzurücken, um es zu überschauen (bzw. sollte er das lernen).

        Mir kommts so vor: Hausaufgabe, Beispiel gefunden, nicht verstanden, Copy&Paste: Macht mal!

        Viele Grüße
        Siri

        1. Wenn der OP hätte verstehen wollen, was da passiert, dann hätte er sich zumindest die Mühe gemacht, alles sauber einzurücken, um es zu überschauen (bzw. sollte er das lernen).

          Dass er es lernen sollte, wohl wahr. Solange der Code wie in dem Falle aber noch überblickbar ist sollte das einen nicht unbedingt vom Helfen abhalten. Ich geh übrigens nach dem Prinzip in dubio pro reo vor, mit dem Vorwurf "du versuchst es gar nicht wirklich" ist man immer schnell zur Hand.

          Mir kommts so vor: Hausaufgabe, Beispiel gefunden, nicht verstanden, Copy&Paste: Macht mal!

          Man muss das Problem ja auch nicht gleich vorlösen ;)

          Lg

          1. ... Ich geh übrigens nach dem Prinzip in dubio pro reo vor, mit dem Vorwurf "du versuchst es gar nicht wirklich" ist man immer schnell zur Hand.

            Dann fällt dir hierzu bestimmt auchwas ein ;-)))

            Viele Grüße
            Siri

            1. Moin Moin!

              Habt erst mal vielen Dank für Eure Hinweise. Werde mich jetzt also dransetzen und das ganze in CSS schreiben.

              Und zur Info: Es ist keine Hausaufgabe. Es ist einfach ein Menü, dass ich in meine Seite einbauen möchte und ich war ja schon froh, etwas ähnliches entdeckt zu haben und dass ich es soweit umschreiben konnte, dass es mir gefällt.
              Wie gesagt, ich lese mich grad erst in die Materie ein und werde also den Rat mit CSS berücksichtigen.

              Habt vielen Dank!

              Esta

              1. Hallo,

                Habt erst mal vielen Dank für Eure Hinweise. Werde mich jetzt also dransetzen und das ganze in CSS schreiben.

                Viel Erfolg!

                Wie gesagt, ich lese mich grad erst in die Materie ein und werde also den Rat mit CSS berücksichtigen.

                Schreib dein CSS besser so:
                .menutitle{
                  cursor:pointer;
                  margin-bottom: 5px;
                  background-color:#FFFF99;
                }
                also so:
                .menutitle{
                cursor:pointer;
                margin-bottom: 5px;
                background-color:#FFFF99;
                }
                Dann ist es leichter lesbar.

                Viele Grüße
                Siri

            2. Dann fällt dir hierzu bestimmt auchwas ein ;-)))

              Einfallen - nein, aber einen Schmunzler ists mir wert ;)

              Lg