我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
版本2的解决方案非常简单,只有CSS。 保持相同的友好功能的手机和平板电脑。
@media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
其他回答
为了加强Sudharshan的回答,我将其包装在一个媒体查询中,以防止在XS显示宽度上出现悬停……
@media (min-width:768px)
{
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
}
标记中的插入符号也不是必需的,只是li的下拉类。
使用以下代码在鼠标悬停时打开子菜单(仅适用于桌面):
$('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),子菜单将在移动设备上采用全屏宽度。
我已经发布了一个Bootstrap 3下拉悬停功能的插件,在这个插件中,你甚至可以定义点击下拉切换元素时发生的事情(点击可以被禁用):
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
既然已经有很多解了,我为什么要做这个?
我对所有之前存在的解决方案都有问题。简单的CSS没有在.dropdown上使用.open类,所以当下拉可见时,下拉切换元素上没有反馈。
js的那些干扰点击.dropdown-toggle,所以下拉菜单显示在悬停,然后隐藏它时,点击一个打开的下拉菜单,移动鼠标将触发下拉菜单再次显示。一些js解决方案破坏了iOS的兼容性,一些插件不能在支持触摸事件的现代桌面浏览器上工作。
这就是为什么我只使用标准的Bootstrap javascript API来防止所有这些问题的Bootstrap下拉悬停插件,没有任何hack。甚至Aria属性在这个插件中也工作得很好。
为那些想在移动设备上使用默认功能的用户添加这个功能。可以设置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,这样下拉开关就不会产生问题。如果保持原样,可能会同时打开两个下拉列表。
这样就把上面的隐藏起来了
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}