引导下拉与Hover

我需要的很简单。

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

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

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

当前回答

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

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

2016-04-04 06:07:46

其他回答

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

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

2014-03-01 08:12:14

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

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

2016-04-04 06:07:46

悬停在导航项上，看到它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

2013-09-09 15:28:53

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

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

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

引导下拉与Hover

推荐文章

最新文章

标签