Question

在boostrap中，隐藏了菜单下拉菜单。单击父级时，下拉列表将显示。

我改变了这一点，以便在悬停时显示下拉列表：

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

这一切都很好，但由于页面上有许多下拉菜单，鼠标飞来飞去时有时会产生图形化的噩梦，所以，我想延迟下拉显示，直到鼠标徘徊1秒钟。这意味着用户真的想看到下拉列表并且没有意外地将鼠标放在它上面。

我尝试以下但是没有效果。下拉列表仍然会立即显示。

ul.dropdown-menu {
    transition: 0s display;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
    transition-delay:1s;
}

有办法吗？

Answer 1

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

http://www.bootply.com/64078

IMO，如果有人想看到下拉列表，他们会点击！

悬停下拉列表可能会令人恼火，特别是当同一页面上有很多内容时

来源： Adding a delay on bootstrap dropdown

CSS Transition延迟显示bootstrap 3菜单

1 个答案: