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

浦修文

2023-12-01

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

#1楼

这将隐藏上升的

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

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

演示

#3楼

我使用了一些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();
});

#4楼

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

#5楼

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

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

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

// 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，但希望能在这么晚的时候帮助其他人（也就是说这是一个老线程）。

如果你愿意，你可以看到我经历的不同过程（在#concrete5 IRC的讨论中）通过这个要点中的不同步骤使其工作： https ： //gist.github.com/3876924

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

有关更多信息，请参阅博文。

#6楼

只是想补充一点，如果你有多个下拉（就像我一样）你应该写：

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

它会正常工作。

#7楼

jQuery解决方案很好，但它需要处理点击事件（对于手机或平板电脑），因为悬停将无法正常工作......可能会做一些窗口重新大小检测？

Andres Ilich的答案似乎运作良好，但它应该包含在媒体查询中：

@media (min-width: 980px) {

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

#8楼

这适用于WordPress Bootstrap：

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

#9楼

在我看来，最好的方法是这样的：

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

#10楼

我按如下方式管理它：

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

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

#11楼

使用此脚本覆盖bootstrap.js。

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

});

#12楼

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

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

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

#13楼

这是我的技术，在您停止悬停在菜单或切换按钮上之后，在菜单关闭之前会稍微延迟。您通常单击以显示导航菜单的<button>是#nav_dropdown 。

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

#14楼

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

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

#15楼

所以你有这个代码：

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

这非常有效，这里有解释：我们有一个按钮和一个菜单。当我们悬停按钮时，我们显示菜单，当我们鼠标按下按钮时，我们会在100毫秒后隐藏菜单。如果你想知道为什么我使用它，是因为你需要时间从菜单上的按钮拖动光标。当您在菜单上时，时间会重置，您可以根据需要随时停留。当您退出菜单时，我们会立即隐藏菜单而不会超时。

我在很多项目中都使用过这段代码，如果你遇到任何问题，请随时问我问题。

#16楼

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

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

#17楼

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

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

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

#18楼

如果你有一个带有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回答，我做了一些更改并添加了一些补充，以使下拉菜单正常工作

#19楼

对于插入符...我没有看到任何一个指定简单的CSS完全阻止插入符号。

干得好：

.caret {
    display: none !important;
}

#20楼

为了增强Sudharshan的答案，我将其包装在媒体查询中，以防止在XS显示宽度时悬停...

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

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

此外，标记中的插入符号不是必需的，只是li的下拉列表 。

#21楼

我已经为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属性也能正常使用这个插件。

#22楼

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

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

#23楼

这对我有用：

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

#24楼

使用此代码在mousehover上打开子菜单（仅限桌面）：

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

如果您希望第一级菜单可以点击，即使在移动设备上也可以添加：

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

子菜单（下拉菜单）将通过鼠标悬停在桌面上打开，并通过手机和平板电脑上的点击/触摸来打开。子菜单打开后，第二次单击将允许您打开链接。由于if ($(window).width() > 767) ，子菜单将在移动设备上占据全屏宽度。

#25楼

$('.dropdown').hover(function(e){$(this).addClass('open')})

#26楼

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

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

#27楼

要使菜单在悬停时自动停止，那么可以使用基本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中的插入符号，只需从.dropdown-toggle锚元素中删除HTML <b class="caret"></b> ：

<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指出我们错过了“>”子组合器，以防止父菜单上显示子菜单

#28楼

除了“My Head Hurts”（这很棒）的回答：

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

有两个挥之不去的问题：

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

（1）的解决方案是从导航链接中删除“class”和“data-toggle”元素

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

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

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

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

#29楼

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

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

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

#30楼

如果它们比平板电脑小，它应该隐藏掉落和它们的插入物。

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}