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


当前回答

只是想补充一下,如果你有多个下拉列表(就像我一样),你应该这样写:

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

它会正常工作的。

其他回答

这个插件在GitHub上,我正在做一些改进(比如只使用数据属性(不需要JS))。我把代码留在下面,但它与GitHub上的不一样。

我喜欢纯CSS版本,但它在关闭前有一个延迟是很好的,因为它通常是一个更好的用户体验(即不会因为鼠标滑到下拉框外1px而受到惩罚,等等),并且正如评论中提到的,有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,但希望能在这个晚些时候帮助其他人(即这是一个旧线程)。

如果您愿意,您可以看到我通过以下要点中的不同步骤(在#concrete5 IRC上的讨论中)使其工作的不同过程:https://gist.github.com/3876924

插件模式方法在支持单个计时器等方面更加简洁。

请参阅博客文章了解更多信息。

我是这样做的:

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

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

对于插入符号…我还没见过有人指定简单的CSS完全阻止插入符号。

给你:

.caret {
    display: none !important;
}

为了加强Sudharshan的回答,我将其包装在一个媒体查询中,以防止在XS显示宽度上出现悬停……

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

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

标记中的插入符号也不是必需的,只是li的下拉类。

版本2的解决方案非常简单,只有CSS。 保持相同的友好功能的手机和平板电脑。

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}