Click function on LI in IE6 has strange behaviour

Question

Hi all,

I asked a similar sort of question a week ago at link text and that particular issue got solved, but only for IE7. I still have issues with IE6.

Basically I have a left navigation menu that I want to work in an "accordion" fashion. The menu is made up of ULs and LIs and I want to be able to click on an LI to open up the sub menu under it.

I showed the code before in the previous post, but here it is again:

<div class="page-body-left" id="leftmenu">
<ul>
    <li class="expandable" style="background-color: rgb(214, 232, 255);"><a class="createlink" href="link1">link1</a>
       <ul style="display: none;">
    <li><a class="createlink" href="link1a">link1a</a></li>
    <li class="last"><a class="createlink" href="link1b">link1b</a></li>
       </ul>
    </li>
    <li><a class="createlink" href="link2">link2</a></li>
    <li class="expandable lastExpandable" style="background-color: rgb(214, 232, 255);"><a title="link3" href="link3">link3</a>
       <ul style="display: none;">
    <li><a class="createlink" href="link3a">link3a</a></li>
    <li class="last"><a title="link3b" href="link3b">link3b</a></li>
      </ul>
   </li>
 </ul></div>

My Javascript to get this to work in IE7 and FF3 is:

    jQuery('#leftmenu .expandable').css('background-color','#D6E8FF');
jQuery('#leftmenu .expandable').click(function () {
 alert("Clicked!");
 jQuery(this).children('ul').slideToggle('fast');
});

The first line looks unrelated but it has to be there or it won't work in IE7 (I've kind of given up asking why??).

So the behaviour in IE6 is there are no errors thrown and the alert is never activated unless you actually click on the link, so the click function seems to have binded on the anchor tag within the LI and not the LI itself. However if you navigate away from the page then go back in your browser, the menu then works by clicking on the LIs, alerts and all.

The behaviour is illogical to me so I was hoping this sounds familiar to more experienced people. I have also tried to do this with normal Javascript and not jQuery with the same results. I have tried to use "onmouseout" and it is the same - the alert is only activated when hovering over the anchor and not the LI (unless you go to another page and come back).

Any ideas? Thanks!!

Answer 1

Without the benefit of IE 6 handy, here's a random suggestion:

Try changing the display type for the expandable to display: block. Maybe IE6 only registers clicks on block level elements, not list-items.

I'll keep researching.

---

Update

Okay, I finally gave up my search for IE6 and just searched Google. And I'm glad I did, cuz I would have never figured this one out.

I'm not sure what the fix is, as I'm not sure how much jquery morphs things around before actually giving the browser the final code, but, I found a page on quirksmode that specifically mentions that IE6 will only execute onclick events that are set up like expressions. In other words:

 mydiv.onclick.color = "red";

won't work, but

function changecolor(e) {
  e.color = "red";
}    

mydiv.onclick = changecolor;

will work. Also, and I only did a really quick read-over, apparently an element can only have one event-handler. Setting up two only makes the second work, the first is over-written.

So in your case, try this out one of these three and tell me which works, if any:

 $('#leftmenu .expandable').click(expand(e));

 function expand(e) {
 $(e).children('ul').slideToggle('fast');
 }

////////////////

 $('#leftmenu .expandable').bind("click", expand(e));

 function expand(e) {
 $(e).children('ul').slideToggle('fast');
 }

 ////////////////

 // Worst case scenario:

 $('#leftmenu .expandable').onclick = expand;

 function expand(e) {
 $(e).children('ul').slideToggle('fast');
 }