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.

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

 
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

Quote:

Originally Posted by 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?

Hello acoder,

There was missing only this part:
addLoadEvent(collapseMenu);
addLoadEvent(prepareMenu);

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

http://www.blazenewmedia.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.

How to make a parent node clickable in a collapse menu

re: How to make a parent node clickable in a collapse menu

re: How to make a parent node clickable in a collapse menu

re: How to make a parent node clickable in a collapse menu

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about