Вертикальное меню / аккордеон с помощью jQuery hover () в Internet Explorer

Question

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

У меня есть такая структура меню:

<ul class="menu">
  <li class="main">
    <a href="#">Main menu</a>
    <ul>
      <li>Sub item</li>
    </ul>
  </li>
</ul>

У меня есть его стиль, так что «sub- <ul>» скрыт.

Этот код отлично работает как на Firefox, так и на Chrome, но неожиданным сюрпризом является то, что Internet Explorer запускает событие mouseout, когда мышь находится надподменю:

$(function() {
  $('ul.menu li.main').hover(function() {
    $(this).find('ul').slideDown();
  }, function() {
    $(this).find('ul').slideUp();
  });
});

Таким образом, в IE7, когда отображается подменю, как только я пытаюсь выбрать элемент в нем, меню снова сдвигается вверх.

Обновление: Я только что смог попробовать IE8, и он тоже отлично работает.Так что это просто IE7 (и, вероятно, 6, но я могу с этим жить).

Я также пытался использовать hoverIntent , который утверждает, что игнорирует события для детей, но он также не работает.

Answer 1

Это на самом деле не ответит на ваш вопрос, но вы действительно не хотите использовать SlideUp / Down при наведении, потому что он перемещает все пункты меню вверх и вниз, так что вы никогда не указываете на то, что вы хотели сдвинуть (конечно, это снова сдвинулся вверх, когда предыдущий элемент свернулся из-за наведения мыши). Пользовательский опыт может быть катастрофическим.

Answer 2

Возможно, вам следует попробовать выбрать только элемент "li.main", чтобы прикрепить событие hover.

$ ('li.main'). Hover (function () { ... }

Он должен работать на IE.