Hi,
I am rather inexperienced with javascript, so please excuse any incorrect references to certain types of statements etc…
I have a CSS based menu that I wanted to tweak with a little javascript. I have some code that works now, but I need to expand it a bit further. Currently the layout is as such:
<div id="leftmenu">
<ul>
<li>...
My javascript works when it is structured as listed above, but I didn’t realise that when I put it into my clients CMS, it was going to add an extra div like so:
<div id="leftmenu">
<div id="cat_763640_divs"> /*extra line here*/
<ul>
<li>...
I can’t simply switch the target name to the cat_763640_divs because this id changes for each menu they create.
This is what my javascript code looks like, could someone explain how to get this working? Or why it is not working? Thanks in advance
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("leftmenu");
for (j=0; j<navRoot.childNodes.length; j++) {
ulNode = navRoot.childNodes[j];
if (ulNode.nodeName=="UL") {
for (i=0; i<ulNode.childNodes.length; i++) {
node = ulNode.childNodes[i];
if (node.nodeName=="LI") {
/* open the selected menu on page load */
if (node.className=="selected") {
node.className = "selected on";
} else {
node.className = "off";
}
node.onclick=function() {
/* close all other menus */
navRoot = document.getElementById("leftmenu");
for (j=0; j<navRoot.childNodes.length; j++) {
ulNode = navRoot.childNodes[j];
if (ulNode.nodeName=="UL") {
for (i=0; i<ulNode.childNodes.length; i++) {
node = ulNode.childNodes[i];
if (node.nodeName=="LI") {
node.className = "off";
}
}
}
}
/* open the selected menu - added selected class when turned on -JD */
this.className = (this.className == "on" || this.className == "selected on") ? "off" : "selected on";
}
}
}
}
}
}
}
window.onload=startList;