如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表

Question

我想让我的Bootstrap菜单在悬停时自动下拉,而不必单击菜单标题.我还想丢失菜单标题旁边的小箭头.

Answer 1

要使菜单在悬停时自动停止,那么可以使用基本CSS实现.您需要将选择器设置为隐藏菜单选项,然后将其设置为在合适的li标记悬停时显示为块.以twitter bootstrap页面为例,选择器如下:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

但是,如果您使用的是Bootstrap的响应功能,则在折叠的导航栏上(在较小的屏幕上)不需要此功能.要避免这种情况,请将以上代码包装在媒体查询中:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

要隐藏箭头(插入符号),这将以不同的方式完成,具体取决于您使用的是Twitter Bootstrap版本2及更低版本还是版本3:

Bootstrap 3

要删除版本3中的插入符号,只需<b class="caret"></b>从.dropdown-toggle锚元素中删除HTML :

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2及更低版本

要删除版本2中的插入符号,您需要更深入地了解CSS,我建议:after更详细地查看伪元素的工作原理.为了让您开始理解,定位和删除twitter bootstrap示例中的箭头,您将使用以下CSS选择器和代码:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

如果你进一步研究这些工作的方式而不仅仅是使用我给你的答案,它将对你有利.

感谢@CocaAkat指出我们错过了">"子组合器,以防止父菜单上显示子菜单

Answer 2

我基于最新的(v2.0.2)Bootstrap框架创建了一个纯粹的悬停下拉菜单,该框架支持多个子菜单,并且我认为我会为将来的用户发布它:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

演示

Answer 3

除了"My Head Hurts"(这很棒)的回答:

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

有两个挥之不去的问题:

1. 单击下拉链接将打开下拉菜单.除非用户点击其他地方,否则它将保持打开状态,或者将其悬停在其上,从而创建一个尴尬的UI.
2. 下拉链接和下拉菜单之间有1px的余量.如果您在下拉菜单和下拉菜单之间缓慢移动,则会导致下拉菜单变为隐藏状态.

(1)的解决方案是从导航链接中删除"class"和"data-toggle"元素

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

这也使您能够创建指向父页面的链接 - 这是默认实现无法实现的.您可以将"#"替换为您要向用户发送的任何页面.

(2)的解决方案是删除.dropdown菜单选择器上的margin-top

.navbar .dropdown-menu {
 margin-top: 0px;
}

Answer 4

我使用了一些jQuery:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Answer 5

这里有很多非常好的解决方案.但是我想我会继续把我的作为另一种选择.它只是一个简单的jQuery代码片段,如果它支持将鼠标悬停在下拉菜单而不是单击,那么就像引导程序一样.我只用版本3对它进行了测试,所以我不知道它是否适用于版本2.将它保存为编辑器中的一个片段,然后按一下键.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

基本上,它只是说当你将鼠标悬停在下拉类时,它会向它添加开放类.然后就行了.当您停止使用下拉类或子ul/li徘徊在父li上时,它将删除打开的类.显然,这只是众多解决方案中的一种,您可以添加它以使其仅适用于.dropdown的特定实例.或者向父级或子级添加转换.

Answer 6

只需在三行代码中自定义CSS样式即可

.dropdown:hover .dropdown-menu {
   display: block;
}

Answer 7

如果你有一个dropdown像这样的类的元素(例如):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

然后你可以让鼠标悬停在下拉菜单上,而不是必须点击它的标题,使用这段jQuery代码:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

这是一个演示

这个答案依赖于@Michael的回答,我做了一些更改并添加了一些补充,以使下拉菜单正常工作

Answer 8

[更新]插件在GitHub上,我正在进行一些改进(比如只使用数据属性(不需要JS).我将代码留在下面,但它与GitHub上的代码不同.

我喜欢纯粹的CSS版本,但是在它关闭之前有一个延迟是很好的,因为它通常是一个更好的用户体验(即不会因为在下拉列表外1 px的鼠标滑动而受到惩罚等),并且如评论中所述,你需要处理1px的保证金,或者当你从原始按钮移动到下拉菜单等时,导航器有时会意外关闭.

我创建了一个快速的小插件,我已经在几个网站上使用它并且它工作得很好.每个导航项都是独立处理的,因此它们有自己的延迟计时器等.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

该delay参数非常自我解释,instantlyCloseOthers当您将鼠标悬停在新的下拉列表时,它将立即关闭所有其他打开的下拉列表.

不是纯粹的CSS,但希望能在这么晚的时候帮助其他人(也就是说这是一个老线程).

如果你愿意,你可以看到我经历的不同过程(在#concrete5IRC 的讨论中),通过这个要点中的不同步骤使其工作:https://gist.github.com/3876924

插件模式方法更加清晰,可以支持个人计时器等.

有关更多信息,请参阅博文.

Answer 9

这对我有用:

.dropdown:hover .dropdown-menu {
    display: block;
}

Answer 10

这是内置于Bootstrap 3.只需将其添加到您的CSS:

.dropdown:hover .dropdown-menu {
display: block;
}

Answer 11

使用jQuery更好:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Answer 12

您可以使用默认$().dropdown('toggle')方法在悬停时切换下拉菜单:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Answer 13

只想添加,如果你有多个下拉(就像我一样)你应该写:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

它会正常工作.

Answer 14

在我看来,最好的方法是这样的:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

样本标记:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

Answer 15

最好的方法是用悬停触发Bootstrap的click事件.这样,它应该仍然保持触摸设备友好.

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

Answer 16

我按如下方式管理它:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

我希望这可以帮助别人...

Answer 17

这可能是一个愚蠢的想法,但只需删除指向下方的箭头,您就可以删除

<b class="caret"></b>

尽管如此......这对于指向一个人没有任何作用.

Answer 18

还添加了margin-top:0来重置.dropdown-menu的bootstrap css边距,这样当用户从下拉菜单慢慢地徘徊到菜单列表时,菜单列表不会消失.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.nav .dropdown-menu {
    margin-top: 0;
}

Answer 19

我已经为Bootstrap 3下拉悬停功能发布了一个合适的插件,您甚至可以在其中定义单击dropdown-toggle元素时发生的事情(可以禁用单击):

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

为什么我已经有很多解决方案了？

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

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

这就是我制作Bootstrap Dropdown Hover 插件的原因,它通过仅使用标准的Bootstrap javascript API来防止所有这些问题,而没有任何黑客攻击.即使是Aria属性也能正常使用这个插件.

Answer 20

这适用于 Bootstrap V4

JS：

<script>
        $(function() {
            $('.dropdown-hover').hover(
                function() { $(this).addClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded', true); $(this).find('.dropdown-menu').addClass('show'); },
                function() { $(this).removeClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded',false); $(this).find('.dropdown-menu').removeClass('show'); }
            );
        });
    </script>

Vanilla Bootstrap 4 Dropdown HTML 除了添加 dropdown-hover 类之外：

<div class="dropdown dropdown-hover">
<button class="btn btn-text dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ABOUT
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

如果您不想使用 .dropdown-hover 类选择性地启用悬停功能，则只需将 jquery 选择器从 .dropdown-hover 更改为 .dropdown 即可。

Answer 21

这也可以做到。

$('.dropdown').on('mouseover',function(){
    $(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
    $(this).find('.dropdown-menu').hide();
});

如果下拉菜单在悬停的元素之间有间隙，则下拉菜单将立即关闭，如此 GIF 所示

为了防止这种行为，您可以为100ms的事件添加超时

let dropdownTimer;
$('.dropdown').on('mouseover', () => {
    clearTimeout(dropdownTimer)
    $(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
    dropdownTimer = setTimeout(() => {
        $(this).find('.dropdown-menu').hide();
    }, 100)
});