引导下拉与Hover

我需要的很简单。

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

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

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

当前回答

    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

2015-03-10 17:41:49

其他回答

这只在你不在移动设备上时悬浮导航栏，因为我发现在移动设备上悬浮导航栏并不好:

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

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

});

2014-05-26 19:23:39

这将帮助你创建你自己的用于引导的hover类:

CSS:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

设置页边距是为了避免不必要的关闭，它们是可选的。

HTML:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

不要忘记删除按钮属性data-toggle="dropdown"如果你想删除onclick open，这也适用于输入附加下拉。

2014-03-12 22:32:34

对于CSS来说，当你点击它的时候，它会变得疯狂。这是我正在使用的代码，它也没有改变任何移动视图。

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

2014-11-20 06:57:21

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

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

2020-11-15 12:37:13

在引导5。X，你可以添加一个自定义类，如下拉悬停到主下拉元素。然后管理悬停事件的JQuery。

$( document ).ready(function() { // Add hover action for dropdowns let dropdown_hover = $(".dropdown-hover"); dropdown_hover.on('mouseover', function(){ let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle'); menu.addClass('show'); toggle.addClass('show').attr('aria-expanded', true); }); dropdown_hover.on('mouseout', function(){ let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle'); menu.removeClass('show'); toggle.removeClass('show').attr('aria-expanded', false); }); }); <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container p-5"> <div class="dropdown dropdown-hover"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#">Action</a> </li> <li> <a class="dropdown-item" href="#">Another action</a> </li> <li> <a class="dropdown-item" href="#">Something else here</a> </li> </ul> </div> </div> </body> </html>

2022-08-07 06:27:14

引导下拉与Hover

推荐文章

最新文章

标签