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

ut_eos 发布于 2018-12-21 css 最后更新 2018-12-21 07:26 46 浏览

我希望我的Bootstrap菜单在悬停时自动下拉,而不必单击菜单标题。我也想失去菜单标题旁边的小箭头。

已邀请:

xatque

赞同来自:

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

nrerum

赞同来自:

这是我的技术,在您停止悬停在菜单或切换按钮上之后,在菜单关闭之前会稍微延迟。您通常单击以显示导航菜单的<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);
});

funde

赞同来自:

如果你有一个像这样的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>
Here is a demo 这个答案依赖于@Michael answer,我做了一些更改并添加了一些补充,以使下拉菜单正常工作

xipsam

赞同来自:

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

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

yet

赞同来自:

这适用于WordPress Bootstrap:

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

yut

赞同来自:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
</body>
</html>

iaut

赞同来自:

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

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

iqui

赞同来自:

所以你有这个代码:

<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&ms;之后隐藏菜单。如果你想知道为什么我使用它,是因为你需要时间从菜单上的按钮拖动光标。当您在菜单上时,时间被重置,您可以在任意时间停留在那里。当您退出菜单时,我们将立即隐藏菜单而不会超时。 我在很多项目中都使用过这段代码,如果你遇到任何问题,请随时问我问题。

qporro

赞同来自:

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

<b class="caret"></b>
尽管如此,这对于指向一个人没有任何作用。

qnon

赞同来自:

执行此操作的最佳方法是使用悬停触发Bootstrap单击事件。这样,它应该仍然保持触摸设备友好。 CODE_0的PLACEHOLDER

lvel

赞同来自:

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

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

gminus

赞同来自:

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

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}
它会正常工作。

amagni

赞同来自:

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

.caret {
    display: none !important;
}

gomnis

赞同来自:

使用此代码在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),子菜单将采用移动设备上的全屏宽度。

yautem

赞同来自:

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

nipsa

赞同来自:

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


为什么我做了,当有很多解决方案? 我遇到了所有以前存在的解决方案的问题。简单的CSS没有在.dropdown上使用.open类,因此当下拉列表可见时,下拉切换元素将没有反馈。 js正在干扰点击.dropdown-toggle,因此下拉列表会显示下拉列表,然后在点击打开的下拉列表时隐藏它,移出鼠标会触发下拉列表再次显示。一些js解决方案正在制动iOS兼容性,一些插件不适用于支持触摸事件的现代桌面浏览器。 这就是为什么我制作了Bootstrap Dropdown Hover插件,它通过仅使用标准的Bootstrap javascript API来防止所有这些问题,而没有任何黑客攻击。即使是Aria属性也能正常使用这个插件。

kquis

赞同来自:

要使菜单在悬停时自动停止,那么可以使用基本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指出我们错过了“>”子元素组合器,以防止子菜单显示在父鼠标悬停上

uautem

赞同来自:

这是JSFiddle - > https://jsfiddle.net/PRkonsult/mn31qf0p/1/ 底部的JavaScript位是真正的魔力。

HTML
<!--http://getbootstrap.com/components/#navbar-->
<div class="body-wrap">
  <div class="container">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
<!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-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><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
<ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-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><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
</div>

CSS
/* Bootstrap dropdown hover menu */
body {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4f5d6e;
  position: relative;
  background: rgb(26, 49, 95);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1)));
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0);
}
.body-wrap {
  min-height: 700px;
}
.body-wrap {
  position: relative;
  z-index: 0;
}
.body-wrap: before,
.body-wrap: after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 260px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
  background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
}
.body-wrap:after {
  top: auto;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}
nav {
  margin-top: 60px;
  box-shadow: 5px 4px 5px #000;
}
然后是JavaScript代码的重要部分:
$('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);
});

hiure

赞同来自:

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

sit_in

赞同来自:

[更新]插件在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,但希望能在这么晚的时候帮助其他人(即这是一个旧线程)。 如果你愿意,你可以看到我经历的不同过程(在对#concrete5 IRC的讨论中),通过这个要点中的不同步骤使其工作:https://gist.github.com/3876924 插件模式方法更加清晰,可以支持个人计时器等。 有关更多信息,请参阅blog post

paut

赞同来自:

内联使用两个链接。使用下拉切换隐藏链接,并在可见链接上添加onmouseover事件,以单击下拉菜单。

<a class="pretty-button"
   href="#" alt="Notifications"
   onmouseover="$('#notifications-dropdown').click()">
</a>
<a style="display:none"
   id="notifications-dropdown"
   class="js-nav js-tooltip js-dynamic-tooltip"
   href="#"
   alt="Notifications"
   data-toggle="dropdown">
   <span class="fa fa-flag fa-2x"></span>
</a>

weos

赞同来自:

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

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}
有两个挥之不去的问题:
  1. 点击下拉菜单链接将打开下拉菜单。它将保持开放状态,除非用户点击其他地方,或者将其悬停在其上,从而创建一个尴尬的用户界面。
  2. 下拉菜单和下拉菜单之间有1px的差距。如果您在下拉菜单和下拉菜单之间缓慢移动,则会导致下拉菜单隐藏。
(1)的解决方案是从导航链接中删除“class”和“data-toggle”元素
<a href="#">
     Dropdown
     <b class="caret"></b>
</a>
这也使您能够创建指向父页面的链接 - 这是默认实现无法实现的。您只需将“#”替换为您要发送给用户的任何页面即可。 (2)的解决方案是删除.dropdown菜单选择器上的margin-top
.navbar .dropdown-menu {
 margin-top: 0px;
}

tut

赞同来自:

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

siure

赞同来自:

 <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-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><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <script>
        $('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);
        });
      </script>

rquis

赞同来自:

为了增强Sudharshan's answer,我将其包装在媒体查询中,以防止在XS显示宽度时悬停...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }
.nav .dropdown-menu {
        margin-top: 0;
    }
}
此外,标记中的插入符号不是必需的,只是li的下拉列表。

peum

赞同来自:

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

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

jautem

赞同来自:

如果它们小于平板电脑,这应该隐藏下拉及其护理人员。 代理人的地方0

sest

赞同来自:

我把它管理如下:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});
我希望这可以帮助别人...

yut

赞同来自:

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

dmodi

赞同来自:

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

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

xillum

赞同来自:

我基于最新的(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>
Demo

frem

赞同来自:

这对我有用:

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

hculpa

赞同来自:

最标准的答案: 因为当你点击下拉列表时,Bootstrap会在点击后运行很多东西! 示例:aria-expanded =“false”将是aria-expanded =“true”。因此,您需要触发点击,它应该在笔记本电脑或计算机上。不在平板电脑或手机上。 而......
$('#your_selector .dropdown').mouseenter(function(event){
    if($(window).width() > 1024) {
        $('.dropdown-toggle', this).trigger('click');
        event.stopPropagation();
    }
});
$('#your_selector .dropdown').mouseleave(function(event){
    if($(window).width() > 1024) {
        $('.dropdown-toggle', this).trigger('click');
        event.stopPropagation();
    }
});
要么
$('#your_selector .dropdown').mouseenter(function(event){
    if($(window).width() > 768) {
        $('.dropdown-toggle', this).trigger('click');
        event.stopPropagation();
    }
});
$('#your_selector .dropdown').mouseleave(function(event){
    if($(window).width() > 768) {
        $('.dropdown-toggle', this).trigger('click');
        event.stopPropagation();
    }
});
并且还在水平导航栏上使用它。

kautem

赞同来自:

我们看到,除了“My Head Hurts”的回答,“Cory Price”发现了两个问题:

Problem 1: Clicking on the dropdown link will open the dropdown-menu. And it will stay open unless the user clicks somewhere else, or hovers back over it, creating an awkward UI. Solution: Remove the "class" and "data-toggle" elements from the nav link
解决方案几乎是完美的,但问题是,当涉及到移动设备和平板电脑时,它将无法正常工作! 我正在使用一些jQuery代码来解决这个问题..
if ($(window).width() > 769) {
    $('.dropdown-toggle').removeAttr('data-toggle');
    $('.dropdown-menu').removeAttr('style');
    $('.dropdown').removeClass('open');
}
$(window).resize(function () {
    if ($(window).width() > 769) {
        $('.dropdown-toggle').removeAttr('data-toggle');
        $('.dropdown-menu').removeAttr('style');
        $('.dropdown').removeClass('open');
    }
    else {
        $('.dropdown-toggle').attr("data-toggle", "dropdown");
    }
});
Note: Here we assume that the collapse to mobile devices and tablets is from 768px.

zhic

赞同来自:

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

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>
基本上,它只是说当你将鼠标悬停在下拉列表上时,它会向它添加开放类。然后就行了。当您停止使用下拉类或子ul / li徘徊在父li上时,它将删除打开的类。显然,这只是众多解决方案中的一种,您可以添加它以使其仅适用于.dropdown的特定实例。或者向父级或子元素添加转换。

eomnis

赞同来自:

这将隐藏上升的

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

a_et

赞同来自:

我希望这有帮助。检查链接https://jsfiddle.net/awb7gfb1/

<nav>
    <div id="menubar" class=" collapse navbar-collapse row">
        <ul id="dropdownNavbar" class="nav navbar-nav">
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-time"></span>
                Time Card
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a id="showTimeCard" href="#">My Time Card</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-stats"></span>
                Project
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-user"></span>
                HR Links
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-screenshot"></span>
                Leave Tracker
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-briefcase"></span>
                Accounts
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-headphones"></span>
                Service Desk
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-file"></span>
                Reports
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-cog"></span>
                Settings
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
和CSS
.dropdown {
    float: left;
    padding-right: 1px;
}
.dropbtn{
    border: 0px;
    height: 30px;
    border-radius: 0px 10px;
}
li button, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
}
li button:hover, .dropdown:hover .dropbtn {
    background-color: #12A5F4;
}
.dropbtn.active {
    background: #12A5F4;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #e8f3f4;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    z-index: 10;
}
.navbar-header{
    overflow: visible;
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 5px 10px;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #d8dee2
}
.dropdown:hover .dropdown-content {
    display: block;
}
#menubar{
    padding-top: 5px;
    overflow: visible;
    z-index: 10;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}
#dropdownNavbar{
    margin: 0px;
}
.navbar-toggle{
    background-color: #3382d5;
}
.navbar-toggle span{
    background-color: white;
}

要回复问题请先登录注册