我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<script>
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true,
true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true,
true).delay(200).fadeOut(500);
});
</script>
其他回答
内联使用两个链接。用下拉按钮隐藏链接,并在可见链接上添加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 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>
这将隐藏下拉列表和它们的插入符号,如果它们比平板电脑小。
@media (max-width: 768px) {
.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
display: none;
}
}
在我看来,最好的办法是这样的:
;(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>
你有这样的代码:
<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毫秒后隐藏菜单。如果你想知道我为什么使用它,是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时,时间会被重置,你可以在那里停留多长时间都行。当您退出菜单时,我们将立即隐藏菜单,没有任何超时。
我已经在许多项目中使用了这段代码,如果您在使用它时遇到任何问题,请随时向我提问。