Javascript Menü à la Win Explorer: Anpassung möglich?

[orso]

GUten Abend!

Ich habe auf einer Website (bin am basteln...) ein klassisches Javascript Menü, wo vor den verschiedenen Punkten + Zeichen sind, um Untermenü auszuklappen und dann + Zeichen, um diese wieder zu schließen. Ich hätte aber gerne, dass man nicht nur auf Plus, bez. Minus klicken kann, sondern zusätzlich auch auf den Namen der Rubrik.

+ Auto
+ Fahrrad
- Motorrad
Honda
Kawa
Suzi
+ LKW

Derzeit kann man nur durch Klick auf +/- das Menü steuern. Könntet Ihr mir sagen, wie ich es auch mit Klick auf z.B. das Wort Fahrrad steuern kann?

Die zuständige Passage ist IMHO folgende:

Code: Alles auswählen

function showhide(el){
  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";
    }

Würde mich sehr über Hilfe freuen!

Im voraus herzlich dankend:

Orso

[FTH]

Versuch dir mal den HTML Quelltext anzusehen.

vermutlich ist das + als href... definiert. Versuch dies auch bei den dazugehörigen Wörtern!

[orso]

Versuch dir mal den HTML Quelltext anzusehen.

vermutlich ist das + als href... definiert. Versuch dies auch bei den dazugehörigen Wörtern!

Hallo!

Danke für Deine Antwort! Ich habe es mit href gemacht, dass der Haupt-Menüpunkt ein Link ist, doch wie man es schafft, dass ein Klick auf diesen nicht einen Link öffnet, sondern - gleich wie beim Plus-Zeichen - das Untermenü aufmacht, weiß ich nicht.

Hg- Orso

[FTH]

Hallo, vielleicht kannst du einmal einen Ausschnitt aus deinem Quelltext posten, aus dem man erkennen kann, wie die + Dargestellt werden und wie die Texte.

Ich vermute einmal du must beim href, noch irgendein onclick - oder soetwas ähnliches aufrufen, aber wie gesagt, bitte Quelltext posten, denn meine Kristallkugel ist gerade auf Urlaub, und ohne sie tu ich mir beim Raten etwas schwer

[orso]

Hallo!

Ja, mit mehr Quelltext wäre es sicherlich übersichtlicher. Sorry...

Code: Alles auswählen



#containerul, #containerul ul{
  text-align:left;
  margin:0; /* Removes browser default margins applied to the lists. */
  padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
  margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
  padding:0; /* Removes browser default padding applied to the list items. */
  list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
  float:left;
  width:14px;
  height:1em;
  background-position:0 50%;
  background-repeat:no-repeat;
}
--></style>

<script type="text/javascript">
<!--
var temp, temp2, cookieArray, cookieArray2, cookieCount;
function initiate(){
  cookieCount=0;
  if(document.cookie){
    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();
    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }
  }
  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
  temp=document.getElementById("containerul");
  for(var o=0;o<temp.getElementsByTagName("li").length;o++){
    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
      temp2 = document.createElement("span");
      temp2.className = "symbols";
      temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus.png)":"url(plus.png)"):"url(plus.png)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }
      cookieCount++;
    }
    else{
      temp2 = document.createElement("span");
      temp2.className = "symbols";
      temp2.style.backgroundImage = "url(page.png)";
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
    }
  }
}

function showhide(el){
  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";
    }

function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
  cookieArray=new Array()
  for(var q=0;q<temp.getElementsByTagName("li").length;q++){
    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
      }
    }
  }
  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}

</script>



Danke für Deine Hilfe!

Orso

[FTH]

Hallo

Das wäre einmal der eine Teil, der die Grundfunktionalität zur Verfügung stellt.

Deine Änderung wirst du aber vermutlich im HTML Teil deiner Seite durchführen müssen. Schau einmal wo und wie deine JS-Funktion showhide() aufgerufen wird.
Ich nehme einmal an, hier wird der Schlüssel zum Erfolg liegen.

hth
FTH