如何在Bootstrap Dropdown悬停上添加延迟 [英] How to add a Delay on Bootstrap Dropdown Hover
本文介绍了如何在Bootstrap Dropdown悬停上添加延迟的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图为引导下拉菜单添加一个延迟。
我已经添加了css让悬停的下拉显示。
您可以在这里测试它 http://www.bootply.com/YcVBzvXqrR
这是我的HTML：
< div class =container>
< div class =row>
< div class =col-xs-12>
< div class =category-box>
< div class =dropdown>
< a href =HTTP://GOOGLE.COMstyle =width：12.5％; float：left;数据肘节=下拉菜单>
< div class =services-shortcut>
< i class =fa fa-bullhorn fa-3x>< / i>
< h5> CATEGORY 1< / h5>
< / div>
< / a>
< div class =dropdown-menu category-overlay>
< a href =＃>动作1< / a>
< / div>
< / div>
< div class =dropdown>
< a href =HTTP://GOOGLE.COMstyle =width：12.5％; float：left;数据肘节=下拉菜单>
< div class =services-shortcut>
< i class =fa fa-car fa-3x>< / i>
< h5> CATEGORY 2< / h5>
< / div>
< / a>
< div class =dropdown-menu category-overlay>
< a href =＃>动作2< / a>
< / div>
< / div>
< div class =dropdown>
< a href =HTTP://GOOGLE.COMstyle =width：12.5％; float：left;数据肘节=下拉菜单>
< div class =services-shortcut>
< i class =fa fa-file-text fa-3x>< / i>
< h5> CATEGORY 3< / h5>
< / div>
< / a>
< div class =dropdown-menu category-overlay>
< a href =＃>动作3< / a>
< / div>
< / div>
< div class =dropdown>
< a href =HTTP://GOOGLE.COMstyle =width：12.5％; float：left;数据肘节=下拉菜单>
< div class =services-shortcut>
< i class =fa fa-home fa-3xstyle =margin-bottom：-20px; margin-top：-11px; font-size：4em;>< / i>
< h5> CATEGORY 4< / h5>
< / div>
< / a>
< div class =dropdown-menu category-overlay>
< a href =＃>动作4< / a>
< / div>
< / div>
< div class =dropdown>
< a href =HTTP://GOOGLE.COMstyle =width：12.5％; float：left;数据肘节=下拉菜单>
< div class =services-shortcut>
< i class =fa fa-cogs fa-3x>< / i>
< h5> CATEGORY 5< / h5>
< / div>
< / a>
< div class =dropdown-menu category-overlay>
< a href =＃>动作5< / a>
< / div>
< / div>
< div class =dropdown>
< a href =HTTP://GOOGLE.COMstyle =width：12.5％; float：left;数据肘节=下拉菜单>
< div class =services-shortcut>
< i class =fa fa-users fa-3x>< / i>
< h5> CATEGORY 6< / h5>
< / div>
< / a>
< div class =dropdown-menu category-overlay>
< a href =＃>动作6< / a>
< / div>
< / div>
< div class =dropdown>
< a href =HTTP://GOOGLE.COMstyle =width：12.5％; float：left;数据肘节=下拉菜单>
< div class =services-shortcut>
< i class =fa fa-heart fa-3x>< / i>
< h5> CATEGORY 7< / h5>
< / div>
< / a>
< div class =dropdown-menu category-overlay>
< a href =＃>动作7< / a>
< / div>
< / div>
< div class =dropdown>
< a href =HTTP://GOOGLE.COMstyle =width：12.5％; float：left;数据肘节=下拉菜单>
< div class =services-shortcut>
< i class =fa fa-briefcase fa-3x>< / i>
< h5> CATEGORY 8< / h5>
< / div>
< / a>
< div class =dropdown-menu category-overlay>
< a href =＃>动作8< / a>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
以下是我的CSS：
.dropdown：hover .dropdown-menu {
display：block;
}
.category-overlay {
width：1190px;
height：90px;
背景：#ddd;
margin-top：30px;
}
我需要知道如何在延迟后显示下拉菜单。
解决方案
我会推荐的两项更改
-
删除css
/.dropdown:hover .dropdown-menu {
display：block;
} /
<
jQuery（'div.dropdown'）。hover（function （）{
jQuery（this）.find（'。dropdown-menu'）。stop（true，true）.delay（200）.fadeIn（500）;
}，function （）{
jQuery（this）.find（'。dropdown-menu'）。stop（true，true）.delay（200）.fadeOut（500）;
}）;
这是我修改的小提琴
$ b
http://www.bootply.com/YcVBzvXqrR#
I'm trying to add a delay for the bootstrap dropdown. I have already added css to make the dropdown show on hover.
You can test it here http://www.bootply.com/YcVBzvXqrR
Here is my HTML:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="category-box">
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-bullhorn fa-3x"></i>
<h5>CATEGORY 1</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 1</a>
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-car fa-3x"></i>
<h5>CATEGORY 2</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 2</a>
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-file-text fa-3x"></i>
<h5>CATEGORY 3</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 3</a>
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
<h5>CATEGORY 4</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 4</a>
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-cogs fa-3x"></i>
<h5>CATEGORY 5</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 5</a>
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-users fa-3x"></i>
<h5>CATEGORY 6</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 6</a>
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-heart fa-3x"></i>
<h5>CATEGORY 7</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 7</a>
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-briefcase fa-3x"></i>
<h5>CATEGORY 8</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 8</a>
</div>
</div>
</div>
</div>
</div>
</div>
And here is my CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
.category-overlay{
width:1190px;
height:90px;
background:#ddd;
margin-top:30px;
}
I need to know how to make the dropdown appear with after a small delay.
解决方案
Two changes I would recommend
Add the below Jquery code to add delay:
jQuery('div.dropdown').hover(function() { jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); });Remove the css
/.dropdown:hover .dropdown-menu { display: block; }/
This is the fiddle I have modified
http://www.bootply.com/YcVBzvXqrR#
这篇关于如何在Bootstrap Dropdown悬停上添加延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
