我构建了一个工作正常的下拉菜单。它是这样的:
- 主菜单项在水平条中，然后
- 当悬停在任何项目上时，会显示大下拉框(带有子菜单链接)。
- 这是我的代码:
HTML:
<!-- Based on Bootstrap -->
<div class="navbar navbar-inverse">
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#about">First item</a>
<div id="about-horizontal-submenu" class="horizontal-submenu">
<div class="submenu-container span3">
<ul>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<!-- and 4x similar div (to have 12 cols) -->
</div>
</li>
<li><a href="#about">Dropdown</a>
<div id="about-horizontal-submenu" class="horizontal-submenu">
<!-- 3x similar div (like above) and then: -->
<div class="submenu-container span3">
<ul>
<li><a href="#">I want to go here</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</div>
</li>
<!-- And then goes another main menu item... -->
</ul>
</div>
</div>
</div>
JS:
jQuery(document).ready(function($) {
'use strict';
$('.navbar .nav > li').hover(function() {
var $el = $(this);
$el.addClass('hover');
var $submenu = $el.find('.horizontal-submenu');
if ($submenu.is(':hidden')) {
$submenu.slideDown(200);
}
}, function() {
var $el = $(this);
$el.removeClass('hover');
var $submenu = $el.find('.horizontal-submenu');
if ($submenu.is(':visible')) {
$submenu.hide();
}
});
});
问题
我想我需要在两者之前添加一点延迟 - 在第一次悬停时向下滑动子菜单和 - 更改子菜单内容(当切换/悬停到另一个菜单项时)。
为什么？
当你将鼠标悬停在“下拉”上并想选择“我想移动到这里”时:
您必须从“下拉菜单”项目向下，然后向右 - 这没问题(但不是很有用)。
问题是，当你像图片显示的那样(从“下拉菜单”直接到“我想移到这里” - 你在路上看到“第三项”并立即看到属于“第三项”的内容项”。这不是很好。
如果您能告诉我如何在很短的时间内延迟/忽略悬停在我的菜单项上，我将不胜感激。 (我在以下位置找到了很好的菜单行为示例:http://FEI.com)
最佳答案
可汗学院的 Ben Kamens 写了一篇关于这个确切问题的文章，概述了 Amazon.com 如何解决它。这是一本很棒的书!
他还整理了一个 jQuery 插件，通过一个工作演示来解决这个问题。您可以在 GitHub 上找到它:
关于javascript - jQuery:延迟显示下拉菜单内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16246211/