我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
我是这样做的:
$('ul.nav li.dropdown').hover(function(){
$(this).children('ul.dropdown-menu').slideDown();
}, function(){
$(this).children('ul.dropdown-menu').slideUp();
});
我希望这能帮助到一些人……
其他回答
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>
以下是我的技巧,它在你停止在菜单或切换按钮上悬停后,在菜单关闭之前添加了轻微的延迟。你通常点击来显示导航菜单的<按钮>是#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);
});
这招对我很管用:
.dropdown:hover .dropdown-menu {
display: block;
}
除了来自“我的头很疼”的答案(这很棒):
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
有两个挥之不去的问题:
单击下拉链接将打开下拉菜单。而且它会一直打开,除非用户点击其他地方,或者将鼠标悬停在它上面,创建一个尴尬的UI。 下拉链接和下拉菜单之间有1px的空白。如果您在下拉菜单和下拉菜单之间缓慢移动,这将导致下拉菜单变得隐藏。
(1)的解决方案是从nav链接中删除“class”和“data-toggle”元素
<a href="#">
Dropdown
<b class="caret"></b>
</a>
这还使您能够创建到父页面的链接——这在默认实现中是不可能的。您只需将“#”替换为您想要发送给用户的任何页面。
(2)的解决方案是删除.下拉菜单选择器上的margin-top
.navbar .dropdown-menu {
margin-top: 0px;
}
用这个脚本覆盖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') })
});
});