Hello,
I download a nice collapse menu for free distribution from the internet. It works very well except that none of the parents nodes are clickable (i.e. when clicking on the parent node, the link does not work). For example, if the below content is included in the html page, I would like that page www.fruit.com can be loaded whenever I click it. However the javascript does not allow the page to be loaded, It would only work for the child nodes apple, orange and pear.
I have been trying to figure out the reason of this during three days with no success. My background in programming is not very strong so I'd appreciate all your help on this.
The java script is as follows:
Thanks,
Ivan
I download a nice collapse menu for free distribution from the internet. It works very well except that none of the parents nodes are clickable (i.e. when clicking on the parent node, the link does not work). For example, if the below content is included in the html page, I would like that page www.fruit.com can be loaded whenever I click it. However the javascript does not allow the page to be loaded, It would only work for the child nodes apple, orange and pear.
Code:
<div id="leftcolumn">
<ul id="menu">
<li> <a href="http://www.fruit.com"><b>> Fruits</b></a>
<ul>
<li><a href="#">>> apple</a></li>
<li><a href="#">>> orange </a></li>
<li><a href="#">>> pear </a></li>
</ul>
</li>
</ul>
</div>
The java script is as follows:
Code:
function collapseMenu(node) {
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
if (!node) node = document.getElementById("menu");
if (node.childNodes.length > 0) {
for (var i=0; i<node.childNodes.length; i++) {
var child = node.childNodes[i];
if (child.nodeName == "UL") {
child.style.display = "none";
}
collapseMenu(child);
}
}
}
function prepareMenu() {
if (!document.getElementById || !document.getElementsByTagName) return false;
if (!document.getElementById("menu")) return false;
var links = document.getElementById("menu").getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
links[i].onclick = function() {
toggleMenu(this.parentNode.getElementsByTagName("UL")[0], this.href);
return false;
}
}
}
function toggleMenu(node, link) {
if (!document.getElementById) return false;
if (!link) return false;
if (!node) location.href = link.href;
// Collapse all nodes, and only show clicked node (when clicking top level of menu)
if (node.parentNode.parentNode.id == "menu") {
hideTopLevels();
}
if (node.style.display == "") {
node.style.display = "none";
} else {
node.style.display = "";
}
}
function hideTopLevels() {
if (!document.getElementById) return false;
if (!(node = document.getElementById("menu"))) return false;
if (node.childNodes.length > 0) {
for (var i=0; i<node.childNodes.length; i++) {
var child = node.childNodes[i];
for(var j=0; j<child.childNodes.length; j++) {
var grandchild = child.childNodes[j];
if (grandchild.nodeName == "UL") {
if (grandchild.style.display == '') {
grandchild.style.display = "none";
}
}
}
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
Ivan
Comment