我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
我们看到,除了“My Head Hurts”的答案,“Cory Price”还发现了两个问题:
问题1:单击下拉链接将打开下拉菜单。它会一直打开,除非用户点击某个地方 或者返回到它上面,创建一个尴尬的UI。 解决方案:从导航链接中删除“class”和“data-toggle”元素
这个解决方案近乎完美,但这里的问题是,当涉及到移动设备和平板电脑时,它就行不通了!
我使用了一些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");
}
});
注意:这里我们假设移动设备和平板电脑的折痕从768px开始。
其他回答
这是Bootstrap 3内置的。 只需将此添加到您的CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
在我看来,最好的办法是这样的:
;(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>
为了让菜单在悬停时自动下落,这可以使用基本的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指出,我们错过了“>”子组合子,以防止子菜单显示在父悬停
如果你有这样一个下拉类的元素(例如):
<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的答案,我做了一些改变,并添加了一些补充,以使下拉菜单正常工作
Bootstrap 4, 2019
我读了很多这样的答案,但最后我自己做了,因为这不是我需要的。
我有引导4,并希望保持点击+悬停功能。此外,我想启用它只有下拉有一个额外的类“.open-on-hover”。
我还想保持Bootstrap的Jquery定位下拉菜单时,它是旁边的页面边缘。所以我们不仅仅要做"display: block"我们想要完整的Bootstrap工作方式。所以我只是触发点击。
逻辑是,如果它是mouseenter则打开它,如果它是mouseleave则隐藏它,如果它是打开的
/**
* Open Bootstrap 4 dropdown on hover
*/
$(document).on('mouseenter mouseleave', '.dropdown.open-on-hover', function(e)
{
let toggler = $(this).find('[data-toggle="dropdown"]').first();
if(e.type === 'mouseenter') {
$(toggler).trigger('click', 'open');
} else if ($(this).children('.dropdown-menu.show').length) {
$(toggler).trigger('click', 'close');
}
});
html
<div class="dropdown open-on-hover">
<div class="btn" data-toggle="dropdown">
Hover or click me
</div>
<div class="dropdown-menu">
<a class="dropdown-item">
Item 1
</a>
<a class="dropdown-item">
Item 2
</a>
</div>
</div>