How to make a parent node clickable in a collapse menu

[Irocivan]

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.

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

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:

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();
        }
    }
}
 

Thanks,
Ivan

[acoder]

You have not given the full code here. Where are prepare, collapse, etc. functions called? Have you seen the documentation for the free script? Which website did you get it from?

[Irocivan]

You have not given the full code here. Where are prepare, collapse, etc. functions called? Have you seen the documentation for the free script? Which website did you get it from?

Hello acoder,

There was missing only this part:
addLoadEvent(co llapseMenu);
addLoadEvent(pr epareMenu);

They are embedded with the previous code. The dynamic menu that I am using is based on the following link:

http://www.blazenewmed ia.com/articles/creating-a-dynamic-navigation-menu

From the example 2 in the page (http://www.cssdev.com/articles/menu/example2/) you can see a menu where the two parent codes are "Fruit" and "Vegetable" but none of the their respective links actually work but only the ones from the child nodes.

Greetings,
Ivan

[acoder]

Having looked at the example and code, I now realise what your problem is.

I'm sorry but that is how it should work. When you click on a parent node, it opens a child menu. If the parent node just took you to another page, there would be no purpose in having a collapsing menu.