带悬停的Bootstrap下拉菜单

179

好的，所以我需要的很简单。

我已经在导航栏中设置了一些下拉菜单（使用class="dropdown-toggle" data-toggle="dropdown"），并且工作正常。

问题是它可以工作“ onClick”，而我希望它可以工作“ onHover”。

有内置的方法吗？

javascript  jquery  html  css  twitter-bootstrap 
— 卡梅利恩博士
source
请参阅我最新发布的适当插件，该插件可防止以下CSS和js解决方案出现问题：github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
— –IstvánUjj-

Answers:

337

最简单的解决方案是使用CSS。添加类似...

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

工作小提琴

— brbcoding
source
3
比长期的“完整”解决方案好得多。只需添加此选项，默认的“ click”下拉列表将在悬停时起作用，而无需进行其他更改。
— IamFace 2014年
47
这将与内置的可折叠移动菜单冲突，因此您应该将其包装在断点@media（最小宽度：480px）中
— Billy Shih
7
同样值得注意的是：如果您有一个带有父子关系的下拉菜单（例如在wordpress主题中），则需要删除该data-toggle属性以使父项可点击...只需注意在移动屏幕上的附带损害。
— 肯王子
2
有一些简单的方法如何禁用点击显示并仅保持悬停行为吗？
— Micer 2014年
1
@Micer，我刚刚发布了一个插件，您可以在其中禁用click事件。该插件仅使用Bootstrap javascript API即可工作，而无需任何CSS hack，因此可与所有设备兼容：github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
— –IstvánUjj-
66

最好的方法是只用鼠标悬停触发bootstrap click事件。这样，它仍然应该保持触摸设备友好

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});
— 马克·威廉姆斯
source
1
失败，如果你有一个以上的下拉水平
— 康妮DeCinko
1
— 无法
下拉菜单关闭后，有没有办法删除Active类？
— brainvision '16
下拉元素和菜单之间存在像素间隙，可能会导致菜单有时隐藏起来，除非您很快
— Matt
1
使用多个下拉列表需要一些“最近”过滤。
— 错误
56

您可以使用jQuery的悬停功能。

您只需要open在鼠标进入时添加类，并在鼠标离开下拉菜单时删除该类。

这是我的代码：

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});
— 阿迪
source
10
比接受的答案更好，恕我直言。这样可以使所有引导逻辑和样式保持不变。尽管我建议使用第二个回调，并明确使用removeClass和addClass来防止单击按钮时出现一些奇怪的行为（当您离开按钮时它将打开，而在输入按钮时将关闭）。
— 巴斯蒂安·林德斯
2
我也认为这是最好的答案。要使其与Bootstrap 4菜单配合使用，我必须使用show代替open，并且还包括dropdown-menu:（$('.dropdown').hover(function() { $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show');}, function() {$(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show');});对不起，格式化。）
— Robin Zimmermann
如果有两个下拉菜单项，则不起作用。悬停在任何下拉菜单项上时，将显示两个子菜单
— Juan AntonioTubío18年
23

使用jQuery的一种简单方法是：

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});
— 比亚乔·基里科（Biagio Chirico）
source
我喜欢平滑的过渡，但是它会导致菜单的所有级别都扩展，而不仅仅是第一级。在将鼠标悬停在其父菜单上之前，我不希望出现二级菜单。
— 康妮·德辛科
1
只得到了第一级，加.first() - $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200);...
— JEdot
9

对于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');
        }
    }
});
— 用户名
source
美女！Tx！CSS替代品在Bootstrap 3及更高版本上不起作用。
— Pedro Ferreira 2015年
5

因此，您有以下代码：

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

通常，它适用于click事件，而您希望它适用于悬停事件。这非常简单，只需使用以下javascript / jquery代码即可：

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

这很好用，下面是解释：我们有一个按钮和一个菜单。当我们将鼠标悬停在按钮上时，将显示菜单，当我们将鼠标悬停在按钮上时，将在100ms之后隐藏菜单。如果您想知道我为什么使用它，是因为您需要时间将光标从菜单上的按钮拖动。当您在菜单上时，时间将被重置，您可以在此处停留任意多的时间。当您退出菜单时，我们将立即隐藏菜单，而不会发生任何超时。

我在许多项目中都使用过此代码，如果您在使用它时遇到任何问题，请随时向我提问。

— 克里斯珊·拉卢卡·特奥多拉（Crisan Raluca Teodora）
source
此代码在bootstrap v3上有很多问题。1.）如果下拉列表不止一个，则将鼠标悬停在所有下拉列表上时，将显示所有下拉列表。2.）在小屏幕上，悬停以奇怪的方式显示下拉列表。
— KayakinKoder
4

这就是我使用一些jQuery将其悬停时使用的下拉菜单

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});
— 阿米尔5000
source
不错，但不支持子菜单。
— 康妮·德辛科
3

尝试使用带有淡入淡出动画的悬停功能

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
— 拉克什·瓦德纳尔
source
该动画无法在第3深度上播放，但可以在第2深度上播放。对于第三深度，您还有其他解决方案吗？
— Jilani A
请加的jsfiddle参考
— 拉克什Vadnal
2

这将帮助您为引导程序制作自己的悬停类：

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>

如果要删除onclick打开，请不要忘记删除按钮属性data-toggle =“ dropdown”，当输入带有下拉菜单追加时，这也将起作用。

— 萨布里·阿兹里（Sabri Aziri）
source
2

仅当您不在移动设备上时，这才会将导航栏悬停，因为我发现将导航悬停在移动设备上效果不佳：

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

});
— 太阳湾飞行员
source
您可以在这里找到更好的解决方案：github.com/CWSpear/bootstrap-hover-dropdown。
— solarbaypilot 2015年
2

我尝试其他解决方案，但我使用的是Bootstrap 3，但下拉菜单关闭太快而无法在其上移动

假设您向li添加class =“ dropdown”，我添加了超时

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});
— al404IT
source
2

更新了适当的插件

我已经发布了用于下拉悬停功能的适当插件，您甚至可以在其中单击该dropdown-toggle元素时定义发生的情况：

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

在已经有许多解决方案的情况下，为什么要做到这一点？

我以前所有现有的解决方案都遇到了问题。简单的CSS不在上使用.open类.dropdown，因此当下拉列表可见时，下拉切换元素将没有反馈。

js干扰了点击 .dropdown-toggle，因此下拉菜单会在悬停时显示，然后在单击打开的下拉菜单时将其隐藏，然后移开鼠标会触发该下拉菜单再次显示。一些js解决方案阻碍了iOS的兼容性，一些插件在支持触摸事件的现代桌面浏览器上不起作用。

这就是为什么我制作了Bootstrap Dropdown Hover插件的原因，该插件通过仅使用标准的Bootstrap javascript API来防止所有这些问题，而没有任何破解。

— 伊斯特万·乌杰伊·梅萨罗斯
source
1 
    $('.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)
    });
— 瓦卡尔·艾哈迈德（Waqar Ahmed）
source
1

使用触发click事件的hover错误很小。如果mouse-in然后click创建反之亦然。这opens时候mouse-out和close当mouse-in。更好的解决方案：

$('.dropdown').hover(function() {
    if (!($(this).hasClass('open'))) {
        $('.dropdown-toggle', this).trigger('click');
    }
}, function() {
    if ($(this).hasClass('open')) {
        $('.dropdown-toggle', this).trigger('click');
    }
});
— 乌梅什卡丹
source
1

html 

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <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>

jQuery的

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

码笔

— 安特洛夫
source
0

我提出的解决方案将检测它是否不是触摸设备，并且navbar-toggle（汉堡菜单）不可见，并使父菜单项在悬停时显示子菜单，并在单击时跟随其链接。

也使tne margin-top为0，因为导航栏和某些浏览器中的菜单之间的间隔不会让您将鼠标悬停在子项目上

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>
展开摘要

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>
展开摘要

— 乔戈斯
source
0

Bootstrap下拉菜单悬停工作，并通过添加属性display：block;保持单击关闭。在CSS中，并从button标记中删除这些属性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
    <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>
展开摘要

— 超级模特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.