Question

我正在尝试为bootstrap下拉列表添加延迟。我已经添加了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.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>

这是我的CSS：

.dropdown:hover .dropdown-menu {
    display: block;
 }

.category-overlay{
    width:1190px;
    height:90px;
    background:#ddd;
    margin-top:30px;
}

我需要知道如何在稍微延迟后显示下拉列表。

Answer 1

我建议两个更改

添加以下Jquery代码以添加延迟：

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);
    });

删除css

/ .dropdown：hover .dropdown-menu { 显示：块; } /

这是我修改过的小提琴

http://www.bootply.com/YcVBzvXqrR#

如何在Bootstrap Dropdown Hover上添加延迟

1 个答案: