简单的仅CSS 解决方案：
.dropdown:hover>.dropdown-menu { display: block;}当单击时，它仍将类
show切换到它（并且不再悬停时将保持打开状态）。
为了解决这个 正确的
方法是使用保留基于指针设备的事件和属性：jQuery的
mouseenter，
mouseleave和
:hover。如果工作顺利，直觉，而不是干扰
都 与下拉如何工作的触摸设备。尝试一下，让我知道它是否适合您：
完整 的jQuery的解决方案 （ 触摸 不变）：
v4.1.2之前的解决方案（ 已弃用 ）：
$('body').on('mouseenter mouseleave','.dropdown',function(e){ var _d=$(e.target).closest('.dropdown'); if (e.type === 'mouseenter')_d.addClass('show'); setTimeout(function(){ _d.toggleClass('show', _d.is(':hover')); $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover')); },300);});$('body').on('mouseenter mouseleave','.dropdown',function(e){ var _d=$(e.target).closest('.dropdown'); if (e.type === 'mouseenter')_d.addClass('show'); setTimeout(function(){ _d.toggleClass('show', _d.is(':hover')); $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover')); },300);});$('.dropdown a').on('click tap', e => e.preventDefault())<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><script src="https://pre.jquery.com/jquery-3.1.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script><nav > <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span ></span> </button> <a href>Navbar</a> <div id="navbarNavDropdown"> <ul > <li > <a href>Home <span >(current)</span></a> </li> <li > <a href>Features</a> </li> <li > <a href>Pricing</a> </li> <li > <a href id="navbarDropdownMenulink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div aria-labelledby="navbarDropdownMenulink"> <a href>Action</a> <a href>Another action</a> <a href>Something else here</a> </div> </li> </ul> </div></nav>V4.1.2
shiplist推出这种变化来的下拉列表中是如何工作的，使得以上不再起作用的解决方案。
这是在 v4.1.2* 及更高版本中悬停时打开下拉列表的 最新 解决方案： *
function toggleDropdown (e) { const _d = $(e.target).closest('.dropdown'), _m = $('.dropdown-menu', _d); setTimeout(function(){ const shouldOpen = e.type !== 'click' && _d.is(':hover'); _m.toggleClass('show', shouldOpen); _d.toggleClass('show', shouldOpen); $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen); }, e.type === 'mouseleave' ? 300 : 0);}$('body') .on('mouseenter mouseleave','.dropdown',toggleDropdown) .on('click', '.dropdown-menu a', toggleDropdown);function toggleDropdown (e) { const _d = $(e.target).closest('.dropdown'), _m = $('.dropdown-menu', _d); setTimeout(function(){ const shouldOpen = e.type !== 'click' && _d.is(':hover'); _m.toggleClass('show', shouldOpen); _d.toggleClass('show', shouldOpen); $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen); }, e.type === 'mouseleave' ? 300 : 0);}$('body') .on('mouseenter mouseleave','.dropdown',toggleDropdown) .on('click', '.dropdown-menu a', toggleDropdown);$('.dropdown a').on('click tap', e => e.preventDefault())<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><script src="https://pre.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><nav > <a href="#">Navbar</a> <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span ></span> </button> <div id="navbarSupportedContent"> <ul > <li > <a href="#">Home <span >(current)</span></a> </li> <li > <a href="#">link</a> </li> <li > <a href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div aria-labelledby="navbarDropdown"> <a href="#">Action</a> <a href="#">Another action</a> <div ></div> <a href="#">Something else here</a> </div> </li> <li > <a href="#">Disabled</a> </li> </ul> <form > <input type="search" placeholder="Search" aria-label="Search"> <button type="submit">Search</button> </form> </div></nav>重要说明： 如果使用jQuery解决方案，则删除CSS很重要（否则，
.dropdown-toggle单击或单击菜单选项时下拉列表不会关闭）。
