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，因为它会上下移动整个菜单项，所以你永远不会指出你想要滑落的东西（当然，它当前一项因鼠标输出而折叠时再次向上移动）。用户体验可能是灾难性的。

在Internet Explorer中使用jQuery hover（）的垂直菜单/手风琴

2 个答案: