我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
你有这样的代码:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
通常它在单击事件上工作,而您希望它在悬停事件上工作。这是非常简单的,只需使用JavaScript/jQuery代码:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
这工作得很好,这里是解释:我们有一个按钮,和一个菜单。当我们悬停按钮时,我们会显示菜单,当我们将鼠标移出按钮时,我们会在100毫秒后隐藏菜单。如果你想知道我为什么使用它,是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时,时间会被重置,你可以在那里停留多长时间都行。当您退出菜单时,我们将立即隐藏菜单,没有任何超时。
我已经在许多项目中使用了这段代码,如果您在使用它时遇到任何问题,请随时向我提问。
其他回答
你有这样的代码:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
通常它在单击事件上工作,而您希望它在悬停事件上工作。这是非常简单的,只需使用JavaScript/jQuery代码:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
这工作得很好,这里是解释:我们有一个按钮,和一个菜单。当我们悬停按钮时,我们会显示菜单,当我们将鼠标移出按钮时,我们会在100毫秒后隐藏菜单。如果你想知道我为什么使用它,是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时,时间会被重置,你可以在那里停留多长时间都行。当您退出菜单时,我们将立即隐藏菜单,没有任何超时。
我已经在许多项目中使用了这段代码,如果您在使用它时遇到任何问题,请随时向我提问。
这个也可以。
$('.dropdown').on('mouseover',function(){
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
$(this).find('.dropdown-menu').hide();
});
如果下拉菜单在悬停元素之间有间隙,下拉菜单将立即关闭,如图所示
为了防止这种行为,您可以为事件添加一个100毫秒的超时
let dropdownTimer;
$('.dropdown').on('mouseover', () => {
clearTimeout(dropdownTimer)
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
dropdownTimer = setTimeout(() => {
$(this).find('.dropdown-menu').hide();
}, 100)
});
使用以下代码在鼠标悬停时打开子菜单(仅适用于桌面):
$('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),子菜单将在移动设备上采用全屏宽度。
内联使用两个链接。用下拉按钮隐藏链接,并在可见链接上添加onmouseover事件以单击下拉菜单。
<a class="pretty-button"
href="#" alt="Notifications"
onmouseover="$('#notifications-dropdown').click()">
</a>
<a style="display:none"
id="notifications-dropdown"
class="js-nav js-tooltip js-dynamic-tooltip"
href="#"
alt="Notifications"
data-toggle="dropdown">
<span class="fa fa-flag fa-2x"></span>
</a>
用这个脚本覆盖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') })
});
});