I'd like to show tree structures using collapsible multi-level nested <ul>
lists (with open/closed "disclosure triangles" as list-style-images).
Something like this:
<ul>
<li onclick="alert('Level 1 clicked');">Level 1
<ul>
<li onclick="alert('Level 2 clicked');">Level 2
</li>
</ul>
</li>
</ul>
Clicking on the text following <li> (or on the list-style-image)
collapses/expands the rest of the content of that <li> (not shown here).
The problem is that each click bubbles up to the topmost list item. That is,
a click on "Level 2" first executes the innermost <li> onclick handler, then
the one for the next-outer-level <li> and so on. How can I make it so that
only the handler for the <li> that's clicked is executed? (returning false
from onclick didn't help in IE 6)
(I know I could wrap the text in <span>s and add the onclick handlers to
those instead, but that's a bit ugly, and the list-style-image would be out
of action)
Joakim Braun
