在引导程序下拉列表中添加延迟

Question

我试图找到在此引导程序下拉列表中添加延迟的最简单方法... 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> 

Answer 1

这个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(); 
      }); 

Answer 2

对于那些遇到这个线程以后。检查出这个伟大的插件，是引导3兼容，并与导航菜单，按钮，按钮组等工作：

https://github.com/CWSpear/bootstrap-hover-dropdown

Answer 3

这只适用于单层下拉菜单，那有什么意义？您只需要延迟多个下拉级别。这根本没用。