引导下拉与Hover

我需要的很简单。

我已经设置了一个导航栏，其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown")，它工作得很好。

事情是它工作“onClick”，而我宁愿如果它工作“onHover”。

有什么内置的方法可以做到这一点吗?

当前回答

使用mouseover()函数触发单击。这样就不会对以前的点击事件造成伤害。用户可以使用悬停和点击/触摸。它将是移动友好的。

$(".dropdown-toggle").mouseover(function(){
    $(this).trigger('click');
})

2020-11-15 12:37:13

其他回答

最简单的解决方案是CSS。加上一些像……

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

工作小提琴

2013-04-25 12:14:50

在Twitter Bootstrap没有实现，但你可以使用这个插件

更新1:

同样的问题

2013-04-25 12:12:46

用jquery的Bootstrap 5版本

只需添加悬停类下拉和添加以下代码到主javascript文件

// Hoverable dropdown
$('.dropdown.hoverable').on({
    mouseenter: function(){
        var dropdown = $(this).children('.dropdown-menu');
        if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
            bootstrap.Dropdown.getOrCreateInstance(this).toggle();
        }
    },
    mouseleave: function(){
        var dropdown = $(this).children('.dropdown-menu');
        if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
            bootstrap.Dropdown.getOrCreateInstance(this).toggle();
        }
    }
});

2022-07-28 15:16:41

最好的方法是用悬停来触发引导点击事件。这样，它应该仍然保持触摸设备友好

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

2014-03-01 08:12:14

通过添加属性display:block，在悬停时工作，并在单击时保持关闭;在CSS中删除这些属性data-toggle="dropdown" role="button"从按钮标签

.dropdown:hover .dropdown-menu { display: block; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle">Dropdown Example</button> <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div> </body> </html>

2019-01-21 11:17:27

引导下拉与Hover

推荐文章

最新文章

标签