Question

我有一个三级悬停菜单，在通过CSS悬停时激活。我希望在显示菜单时实现淡入淡出的延迟，但是，我很难在菜单的最后一级找出如何做到这一点。

第一级可以稍微延迟正常工作，但是从父级打开第三级时似乎没有延迟。

这是我的Jquery代码。

$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

$('ul.nav li#secondary').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
$(this).find('.dropdown-men').stop(true, true).delay(200).fadeOut();
});

Fiddle

我认为它与我的CSS有关，而不是Jquery本身。

Answer 1

它与jquery和CSS有关。

在第一个元素的悬停中你也只想找到第一个元素下拉列表，否则两者都会同时淡出

$('ul.nav li.dropdown').hover(function() {
    var first = $(this).find('.dropdown-menu')[0];
    $(first).stop(true, true).delay(200).fadeIn();
}, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

$('ul.nav li#secondary').hover(function() {
    console.log("reached sub here 1");
    $(this).find('.sub-menu').stop(true, true).delay(200).fadeIn();
    console.log($(this).find('.sub-menu'));
}, function() {
    $(this).find('.sub-menu').stop(true, true).delay(200).fadeOut();
});

在CSS子菜单中应设置为display：none

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

.navbar-brand img {
  position: absolute;
  left: 50%;
  top: 0;
  text-align: center;
  margin: 0 auto;
}

.navbar-toggle {
  z-index: 3;
}

nav.navbar i.fa {
  padding-left: 5px;
  padding-right: 5px;
}

ul.nav li:hover > ul.dropdown-menu {
  //display: block;
}

#navbar {
  text-align: center;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  display:none;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu,
.dropdown-menu li:focus .sub-menu {

}

#navbar-collapse-new.navbar-collapse {
  padding-top: 0px;
  padding-right: 38px;
}

HTML：

<nav class="navbar navbar-default" role="navigation" aria-label="Main Menu">
   <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar-collapse-new">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar">
         </span><span class="icon-bar">
         </span><span class="icon-bar">
         </span>
         </button>
         <a class="navbar-brand" href="#">Brand</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-collapse-new">
         <ul class="nav navbar-nav navbar-left" role="menu">
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
               <ul class="dropdown-menu" id="secondaryMenu" role="menu" aria-expanded="false">
                  <li id="secondary" role="menuitem">
                     <a href="#">One more separated link</a>
                     <ul class="dropdown-menu sub-menu" role="menu">
                        <li id="tertiary" role="menuitem">
                           <a title="Organizer Home Page" class="tertiary-link" href="/geonext/myhome.geo">Organizer     Home</a>
                        </li>
                     </ul>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container-fluid -->
</nav>

https://jsfiddle.net/ka6me6p0/

Boostrap菜单上的三级悬停延迟

1 个答案: