[Javascript] Javascript Tree menu
Paul Novitski
paul at juniperwebcraft.com
Fri Oct 20 00:38:07 CDT 2006
At 10/19/2006 09:36 PM, Brian Jones wrote:
>I have a tree menu at ( http://astro.temple.edu/~tua14115/tree.htm )
>and I am having problems with the "expand all" and "collapse all"
>functions. Basically they are not working at all. I am looking to
>tweak the javascript code to provide me with two versions of the tree
>menu.
>
>-One that has the menu fully expanded when the page loads but still
>allows for them to be collasped and expanded and
>
>-One that is like the current version but allows the expand and
>collapse links to work.
>
>Here's the link to my javascript file
>http://astro.temple.edu/~tua14115/tree.js.
Brian,
Your Expand() and Collapse() functions get arrays of
document.getElementsByTagName("DIV") but you have no DIVs on the
page. That logic must be left over from an earlier iteration of your
markup. You need different logic to pinpoint all the sub-menus, e.g.
document.getElementsByTagName("UL") and then walk through them
disappearing the ones with certain characteristics.
My approach to this problem would be different -- instead of messing
with style and innerHTML attributes, I'd toggle the sub-menus by
toggling the classNames of the clicked LIs between 'expanded' and
'collapsed' or whatever. Then you can define those classes in your
stylesheet to include image name (a background image on the LI
element) and the display property of the child ULs.
By the way, you've got a typo in your markup here:
<li><a id="xspecs" href="javascript:Toggle('specs');"><img
src="folder.gif" width="16px" height="16px" /></a><b>Main2</b></li>
<ul id="specs" style="display: none; margin-left: 2em;">
You've erroneously closed the LI tag; instead it should enclose the nested UL.
Regards,
Paul
More information about the Javascript
mailing list