Internet Explorer中帶有jQuery hover（）的垂直菜單/手風琴

Question

我想做的事情很簡單，因此我不希望使用jQuery UI或某些插件來誇大我的應用程序。

我有一個像這樣的菜單結構：

<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

也許您應該嘗試僅選擇“ li.main”元素來附加懸停事件。

$（'li.main'）。hover（function（）{...}

應該可以在IE上使用。

Answer 2

這並不能真正回答您的問題，但是您真的不想在懸停時使用SlideUp / Down，因為它可以上下移動整個菜單項，因此您永遠不會指向要向下滑動的內容（當然，它已經向上移動了當上一項由於鼠標移出而折疊時再次發生）。 用戶體驗可能是災難性的。