twitter-bootstrap 在引导下拉菜单上添加延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17085030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a delay on bootstrap dropdown
提问by Tom Rudge
I'm trying to find the most simplistic way of adding a delay on this bootstrap dropdown...http://www.bootply.com/64074I have tried various methods and scripts but I cant seem to do it. I've added a css line to allow auto dropdown on mouseover.
我试图找到在此引导下拉列表中添加延迟的最简单方法... http://www.bootply.com/64074我尝试了各种方法和脚本，但似乎无法做到。我添加了一个 css 行以允许在鼠标悬停时自动下拉。
<!-- Top Nav -->
<div class="navbar hidden-phone well well-small">
<div class="navbar-inner header-drop-nav">
<!-- 1st dropdown -->
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Destination <b class="caret"></b></a>
<ul class="dropdown-menu">
<!-- 1st Top Nav links -->
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!-- 2nd dropdown -->
<ul class="nav nav-tabs pull-middle">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Activity <b class="caret"></b></a>
<ul class="dropdown-menu">
<!-- 2nd Top Nav links -->
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!-- 3rd dropdown -->
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Interest <b class="caret"></b></a>
<ul class="dropdown-menu">
<!-- 3rd Top Nav links -->
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!-- 4th dropdown -->
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Special Offers <b class="caret"></b></a>
<ul class="dropdown-menu">
<!-- 4th Top Nav links -->
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right hidden-tablet">
<input class="span3" type="text" placeholder="Search">
<button type="submit" class="btn btn-primary">GoSeeDo</button>
</form>
</div>
</div>
回答by Tom Rudge
This JQuery did the trick! http://www.bootply.com/64081
这个 JQuery 做到了！http://www.bootply.com/64081
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
回答by Nick
For those that come across this thread later.. check out this great plugin that is Bootstrap 3 compatible and works with nav menus, buttons, button groups etc:
对于那些稍后遇到此线程的人..查看这个与 Bootstrap 3 兼容并适用于导航菜单、按钮、按钮组等的优秀插件：
