GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

No menu could be recovered. Follow the blue links in the page.

This view

  • Original page
  • New address

GeezerVison is showing javascript.info — Tree menu

  • Tutorial
  • Browser: Document, Events, Interfaces
  • Introduction to Events
  • Event delegation
back to the lesson

Tree menu

importance: 5

Create a tree that shows/hides node children on click:

Requirements:

  • Only one event handler (use delegation)
  • A click outside the node title (on an empty space) should not do anything.

Open a sandbox for the task.

The solution has two parts.

  1. Wrap every tree node title into <span>. Then we can CSS-style them on :hover and handle clicks exactly on text, because <span> width is exactly the text width (unlike without it).
  2. Set a handler to the tree root node and handle clicks on that <span> titles.

Open the solution in a sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.