SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    May 2009
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with menu

    I have a menu which consists of a div containing a unordered list. In the css I have set it to display:none. When you click the header of the list a javascript should change the display value to block. I have made it work with a lot of id:s, functions and if-so statements.

    Now I want to get rid of all those extra id, functions and if_so statements and only use one function. But since I am a complete newbie I dont know how to do it.

    Heres in the menu I want to rebuild in a more rational way:

    bahnhof.se/wb846624/sitepoint/navigation.html

    I have tried with firstChild and nextSibling but I cannot get it work. Any tip is very welcome!!! Thanks!

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might find it helpful to view attributes of the node your working with. It would help you see gotchas like how the nextSibling is a text node, or it could be an html comment etc...

    You could use a loop.

    Code JavaScript:
    // onclick handler for those "header" links
    function showMenu() {
        var elem = this.nextSibling;
        while (elem !== null) {
            if (elem.nodeName === 'DIV') {
                elem.style.display = elem.style.display === 'none' ? 'block' : 'none';
                break;
            }
            elem = elem.nextSibling;
        }
    }
    Notice how we skip any sibling that isn't a div, and that I test for the possibility that there might not be a nextSibling, although that wouldn't happen with your current html.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •