Question

I have built an expandable tree, using nested UL’s. Here is the simplified code of what I have:

<li>
    <div><a href="somepage">Link</a></div>
    <ul>...</ul>
</li>

The <li> has a padding-left of 20px and a background image of either a plus or a minus. I have a click event on the <li>, to toggle a class and save the current state in a cookie. When I click it, it seems as if the <a> is clicked – it gets a dashed outline and the page location changes. However, the <li> click event is also executed – the tree expands. I would like to only have the <li> click event executed.

It works fine in IE8+, Chrome and Firefox, just not in IE7. In case it is of any interest: I use jQuery to bind the click event to the <li>.

---

EDIT: As suggested in a comment by T.J. Crowder, I added a jsfiddle example here. EDIT 2: changed the jQuery selector. Still same behaviour, though.

---

UPDATE: It is actually IE9 in IE7 mode, would that make a difference?

Answer 1

It seems that the solution is quite easy: use actual IE7, instead of IE9’s IE7 mode.

Sorry to bother you, folks!