Функция нажатия на LI в IE6 имеет странное поведение

Question

Я задавал подобный вопрос неделю назад на текст ссылки , и эта конкретная проблема была решена, но только для IE7. У меня все еще есть проблемы с IE6.

По сути, у меня есть левое навигационное меню, которое я хочу работать в стиле аккордеона. Меню состоит из UL и LI, и я хочу иметь возможность щелкнуть по LI, чтобы открыть подменю под ним.

Я уже показывал код в предыдущем посте, но здесь он снова:

<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>

Мой Javascript для работы в IE7 и FF3:

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

Первая строка выглядит не связанной, но она должна быть там, или она не будет работать в IE7 (я как бы отказался спрашивать, почему ??).

Таким образом, поведение в IE6 не выдает никаких ошибок, и предупреждение никогда не активируется, если вы фактически не нажимаете на ссылку, поэтому функция щелчка, похоже, связана с тегом привязки внутри LI, а не с самой LI. Однако, если вы уйдете со страницы, а затем вернетесь в браузер, то меню будет работать, щелкнув LI, оповещения и все.

Поведение нелогично для меня, поэтому я надеялся, что это звучит знакомо более опытным людям. Я также пытался сделать это с обычным Javascript, а не JQuery с теми же результатами. Я попытался использовать «onmouseout», и это то же самое - предупреждение активируется только при наведении курсора на привязку, а не на LI (если вы не переходите на другую страницу и не возвращаетесь).

Есть идеи? Спасибо !!

Answer 1

Без использования IE 6, вот случайное предложение:

Попробуйте изменить тип отображения для расширяемого на display: block. Возможно, IE6 регистрирует клики только на элементах уровня блока, а не на элементах списка.

Я буду продолжать исследования.

---

Обновление

Хорошо, я наконец прекратил поиск IE6 и только что искал в Google. И я рад, что я сделал, потому что я бы никогда не понял это.

Я не уверен, что это за исправление, так как я не уверен, насколько jquery изменяет вещи перед тем, как фактически дать браузеру окончательный код, но я нашел страницу на quirksmode , которая специально упоминает, что IE6 будет выполнять только onclick события, которые настроены как выражения. Другими словами:

 mydiv.onclick.color = "red";

не будет работать, но

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

mydiv.onclick = changecolor;

будет работать. Кроме того, и я только что сделал очень быстрое чтение, очевидно, элемент может иметь только один обработчик событий. Установка двух только делает вторую работу, первая перезаписывается.

Итак, в вашем случае, попробуйте один из этих трех и скажите мне, что работает, если таковые имеются:

 $('#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');
 }