Question

好的，所以我需要的是相当简单的。

我已经设置了一个导航栏，其中包含一些下拉菜单（使用class="dropdown-toggle" data-toggle="dropdown"），它运行正常。

事情是它有效“onClick”，而我更喜欢它是否有效“onHover”。

有没有内置方法可以做到这一点？

Answer 1

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

的内容

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

Working Fiddle

Answer 2

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

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

Answer 3

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

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

这是我的代码：

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

Answer 4

使用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);
    });  
});

Answer 5

对于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');
        }
    }
});

Answer 6

将鼠标悬停在导航项上以查看它们是否在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

Answer 7

在Twitter Bootstrap is not implemented中，您可以使用this plugin

更新1：

Sames question here

Answer 8

所以你有这个代码：

<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>

通常它适用于点击事件，您希望它适用于悬停事件。这很简单，只需使用这个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后隐藏菜单。如果你想知道为什么我使用它，是因为你需要时间从菜单上的按钮拖动光标。当您在菜单上时，时间会重置，您可以根据需要随时停留。当您退出菜单时，我们会立即隐藏菜单而不会超时。

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

Answer 9

使用带有fadein fadeout动画的悬停功能

尝试此操作

clear

Answer 10

这是我使用一些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');
    });
});

Answer 11

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

假设您添加了class =＆＃34; dropdown＆＃34;到李，我添加了一个超时

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

Answer 12

使用正确的插件

更新

我已经为下拉悬停功能发布了一个合适的插件，您甚至可以在其中定义点击dropdown-toggle元素时会发生什么：

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

为什么我做了，当有很多解决方案？

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

js正在干扰点击.dropdown-toggle，因此下拉列表显示下拉列表，然后点击打开的下拉列表时隐藏它，移出鼠标会触发下拉列表再次显示。一些js解决方案正在制动iOS兼容性，一些插件不适用于支持触摸事件的现代桌面浏览器。

这就是我制作Bootstrap Dropdown Hover插件的原因，它只使用标准的Bootstrap javascript API来防止所有这些问题，而且没有任何黑客攻击。

Answer 13

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

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

});

Answer 14

这将帮助您为bootstrap创建自己的悬停类：

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 =＆＃34;下拉＆＃34; ，这也可以在添加输入时使用下拉。

Answer 15

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

Answer 16

使用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');
    }
});

Answer 17

我建议的解决方案是检测其是否为非触摸设备且navbar-toggle（汉堡包菜单）不可见，并使父菜单项在悬停时显示子菜单和点击后点击其链接。

同样使得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>

Answer 18

Bootstrap下拉菜单悬停工作，并通过在CSS中添加属性 display：block; 并删除这些属性 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>

Answer 19

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

        });

codepen

Answer 20

使用mouseover()功能触发点击。这样，先前的单击事件将不会受到损害。用户可以同时使用鼠标悬停和单击/触摸。它将对移动设备友好。

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

带悬停的Bootstrap下拉列表

20 个答案:

使用正确的插件

为什么我做了，当有很多解决方案？