Internet Explorer 中带有 jQuery hide() 的垂直菜单/折叠式菜单
我想做的事情非常简单，所以我不想用 jQuery UI 或某些插件来使我的应用程序膨胀。
我有一个像这样的菜单结构：
<ul class="menu">
<li class="main">
<a href="#">Main menu</a>
<ul>
<li>Sub item</li>
</ul>
</li>
</ul>
我对其进行了样式设置，因此“sub-
这段代码在 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，它声称忽略儿童事件，但它并没有也不行。
What I want to do is pretty simple, so I'd rather not bloat my app with jQuery UI or some plugin.
I have a menu structure like so:
<ul class="menu">
<li class="main">
<a href="#">Main menu</a>
<ul>
<li>Sub item</li>
</ul>
</li>
</ul>
I have it styled so the "sub-<ul>" is hidden.
This code works perfectly on both Firefox and Chrome, but surprise surprise, Internet Explorer fires the "mouseout" event when the mouse is over the sub menu:
$(function() {
$('ul.menu li.main').hover(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
});
So in IE7, when the submenu is displayed, as soon as I try to select an item in it, the menu slides up again.
Update: I was just able to try IE8 and it works fine too. So it's just IE7 (and probably 6 but I can live with that).
I also tried using hoverIntent, which claims to ignore events on children, but it doesn't work either.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
也许您应该尝试仅选择“li.main”元素来附加悬停事件。
$('li.main').hover(function() {
...
。
它应该可以在 IE 上运行
Maybe you should try to select only the "li.main" element to attach the hover event.
$('li.main').hover(function() {
...
}
It's supposed to work on IE.
这并不能真正回答你的问题，但你真的不想在悬停时使用 SlideUp/Down，因为它会上下移动整个菜单项，所以你永远不会指向你想要下滑的内容（当然，它已经向上移动了）当前一个项目由于鼠标移开而折叠时再次出现）。用户体验可能是灾难性的。
This won't really answer your question but you really don't want to use SlideUp/Down on hover because it moves the whole menu items up and down so you never point at what you wanted to slidedown (of course, it has moved up again when the previous item has collapsed because of the mouseout). The user experience can be catastrophic.