我试图找到在这个引导程序下拉列表中添加延迟的最简单方法…
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>
解决方法
这个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(); });
原文地址:https://www.jb51.cc/jquery/176380.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。