带悬停的Bootstrap下拉列表

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
 }

工作小提琴

Answer 2

执行此操作的最佳方法是使用悬停触发bootstraps click事件.这样,它应该仍然保持触摸设备友好

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

在Twitter中,Bootstrap 未实现,但您可以使用此插件

更新1:

Sames 在这里提问

Answer 7

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

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>

通常，它适用于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之后隐藏菜单。如果您想知道我为什么使用它，是因为您需要时间将光标从菜单上的按钮拖动。当您在菜单上时，时间将重置，您可以在此处停留任意多的时间。当您退出菜单时，我们将立即隐藏菜单，而不会发生任何超时。

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