Bootstrap 如何实现下拉列表/下拉菜单(dropdown)鼠标悬停时自动显示菜单项而不需要点击？

3.26K 次浏览

在使用Bootstrap做前端网页开发时，如何实现当鼠标悬停在Bootstrap的下拉菜单(dropdown)时自动显示菜单项，而不需要点击下拉菜单的标题才展示菜单项呢？

我来回答收藏(0) 评论编辑

Rector

2020-05-11 提问

回复 [×]

提交评论

请输入评论内容

4 个回答

0
在Bootstrap 3 中，可以通过设置下拉菜单的CSS样式来实现，如下：
```
.dropdown:hover .dropdown-menu {
    display: block;
}
```
评论分享

Rector

2020-05-09 回答

使用jQuery实现的方式，如下：

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

Rector

2020-05-09 回答

另一种使用jQuery实现的方式，如下：

$(function() {
    $(".dropdown").hover(
        function(){ $(this).addClass('open') },
        function(){ $(this).removeClass('open') }
    );
});

Rector

2020-05-09 回答

使用jQuery调用dropdown()方法的实现，如下：

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Rector

2020-05-09 回答

我来回答

提交答案