我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
这样就把上面的隐藏起来了
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
其他回答
我们看到,除了“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开始。
以下是我的技巧,它在你停止在菜单或切换按钮上悬停后,在菜单关闭之前添加了轻微的延迟。你通常点击来显示导航菜单的<按钮>是#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);
});
如果你有这样一个下拉类的元素(例如):
<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>
jQuery的解决方案是好的,但它将需要处理点击事件(移动或平板电脑)悬停将无法正常工作…也许可以做一些窗口重新大小检测?
安德烈斯·伊里奇的回答似乎很有效,但它应该被包装在一个媒体问题中:
@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;
}
}