我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。


当前回答

我是这样做的:

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

我希望这能帮助到一些人……

其他回答

为那些想在移动设备上使用默认功能的用户添加这个功能。可以设置min-width:…根据需要

@media only screen and (min-width: 1195px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
  ul.nav li.dropdown> ul.dropdown-menu {
    display: none;
  }
}

设置display: none,这样下拉开关就不会产生问题。如果保持原样,可能会同时打开两个下拉列表。

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

这里有很多非常好的解决方案。但我想我还是把我的放在这里作为另一种选择。这只是一个简单的jQuery代码片段,如果它支持悬停下拉而不是单击,它就会以引导的方式完成。我只测试了版本3,所以我不知道它是否适用于版本2。将其保存为编辑器中的一个片段,按一下键就可以看到它。

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

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

为了让菜单在悬停时自动下落,这可以使用基本的CSS实现。您需要计算出隐藏菜单选项的选择器,然后将其设置为在适当的li标记悬停时显示为块。以twitter引导页面为例,选择器如下所示:

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,以不同的方式完成:

引导3

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

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

Bootstrap 2 &更低

要删除版本2中的插入符号,您需要对CSS有更多的了解,我建议更详细地了解:after伪元素是如何工作的。为了让你开始理解,在推特引导例子中瞄准并删除箭头,你将使用以下CSS选择器和代码:

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

如果你深入研究这些方法,而不是仅仅使用我给你的答案,这会对你有利。

感谢@CocaAkat指出,我们错过了“>”子组合子,以防止子菜单显示在父悬停

用这个脚本覆盖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') })
});

});