在Bootstrap下拉菜单上添加延迟 [英] Adding a delay on bootstrap dropdown
本文介绍了在Bootstrap下拉菜单上添加延迟的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试找到最简单的方法来增加此Bootstrap下拉菜单的延迟... http://www.bootply.com/64074 我尝试了各种方法和脚本,但似乎无法做到.我添加了css行以允许鼠标悬停时自动下拉.
I'm trying to find the most simplistic way of adding a delay on this bootstrap dropdown...http://www.bootply.com/64074 I 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.
<!-- 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>
推荐答案
此JQuery可以解决问题! http://www.bootply.com/64081
This JQuery did the trick! 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();
});
这篇关于在Bootstrap下拉菜单上添加延迟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文