Question

I am making a tree control using <ul>. Clicking on an item expands or collapses the node.

List images (bullets) are not clickable, so the solution seems to be to hide them and just show my own image. The problem with this is that when an item wraps to the next line, the default wrapping indent behavior of a list item is lost.

How can I achieve what I want in CSS?

Answer 1

There’s no need to replace your bullets with images. When you bind the onclick event of an li to some function, clicking the bullet seems to fire it as well. To bind the onclick of the bullet to a different function, wrap li text content in a span and assign a different onclick event; something like:

$("li").click(function() {
   alert("I'm a bullet! Glee's awesome!");
});
$("li span").click(function(event) {
   alert("I'm some text! Glee's awesome!");
   event.stopPropagation(); //make sure the li onclick isn't fired
});

And a little working demo: little link.

Hope that helped!