引导下拉与悬停
Bootstrap Dropdown with Hover
好的,我需要的是相当简单的。
我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown"
),它工作得很好。
事情是它工作"onClick
",而我更喜欢如果它工作"onHover
"。
是否有任何内置的方法来做到这一点?
最简单的解决方案就是CSS。添加如下内容:
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
JSFiddle
最好的方法是通过悬停触发bootstrap click事件。这样,它应该仍然保持触摸设备友好
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
可以使用jQuery的hover函数
您只需要在鼠标进入时添加open
类,在鼠标离开下拉菜单时删除该类。
下面是我的代码:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
使用jQuery的一个简单方法是:
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
});
对于CSS,当你点击它时它会发疯。这是我使用的代码,它也没有改变任何移动视图
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
在Twitter Bootstrap没有实现,但你可以使用这个插件
更新1:
同样的问题
将鼠标悬停在导航项上,查看它们是否在悬停时激活。http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
所以你有这样的代码:
<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毫秒后隐藏菜单。如果你想知道我为什么使用它,是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时,时间会被重置,你可以在那里待多久就待多久。当你退出菜单时,我们会立即隐藏菜单,没有任何超时。
我已经在很多项目中使用了这个代码,如果你在使用它时遇到任何问题,请随时向我提问。
这将帮助您为bootstrap创建自己的hover类:
CSS:/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
display: block;
}
设置边距以避免不必要的关闭,它们是可选的。
HTML:<div class="btn-group hover_drop_down">
<button type="button" class="btn btn-default" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
不要忘记删除按钮属性data-toggle="dropdown"如果你想删除onclick open,这也会在输入后添加dropdown时起作用。
这是我使用jQuery在悬停时使用的下拉菜单
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function () {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
}, function () {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
});
});
已更新为合适的插件
我已经为下拉悬停功能发布了一个适当的插件,在这个插件中,你甚至可以定义点击dropdown-toggle
元素时会发生什么:
既然已经有很多解决方案了,我为什么还要这么做?
我对所有先前存在的解决方案都有问题。简单的CSS没有在.dropdown
上使用.open
类,所以当下拉切换元素可见时,下拉切换元素将没有反馈。
js的那些是干扰点击.dropdown-toggle
,所以下拉菜单显示在悬停,然后隐藏它时,点击一个打开的下拉菜单,并移动鼠标将触发下拉菜单再次显示。有些js解决方案会影响iOS的兼容性,有些插件无法在支持触摸事件的现代桌面浏览器上运行。
这就是为什么我做了Bootstrap Dropdown Hover插件,它通过只使用标准的Bootstrap javascript API来防止所有这些问题,没有任何hack。
尝试使用带有淡出动画的悬停函数
$('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);
});
这只在你不在移动设备上时才会将导航条悬停,因为我发现在移动设备上悬停导航并不好用:
$( document ).ready(function() {
$( 'ul.nav li.dropdown' ).hover(function() {
// you could also use this condition: $( window ).width() >= 768
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
}, function() {
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
});
});
我尝试了其他解决方案,我使用bootstrap 3,但下拉菜单关闭得太快,无法移动
假设你添加class="dropdown"到li,我添加了一个超时
var hoverTimeout;
$('.dropdown').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('open');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('open');
}, 150);
});
用hover
触发click
事件有一个小错误。如果mouse-in
和click
创建相反的效果。当mouse-out
时opens
,当mouse-in
时close
。更好的解决方案:
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
Bootstrap下拉菜单在鼠标悬停时工作,点击时保持关闭,在css中添加属性display:block;并删除这些属性data-toggle="dropdown"role="button" from按钮标签
.dropdown:hover .dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle">Dropdown Example</button>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
引导 5。x您可以添加自定义类,如dropdown-hover
到主下拉元素。然后通过JQuery管理悬停事件。
$( document ).ready(function() {
// Add hover action for dropdowns
let dropdown_hover = $(".dropdown-hover");
dropdown_hover.on('mouseover', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.addClass('show');
toggle.addClass('show').attr('aria-expanded', true);
});
dropdown_hover.on('mouseout', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.removeClass('show');
toggle.removeClass('show').attr('aria-expanded', false);
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-5">
<div class="dropdown dropdown-hover">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
</div>
</body>
</html>
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});
html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
jquery $(document).ready( function() {
/* $(selector).hover( inFunction, outFunction ) */
$('.dropdown').hover(
function() {
$(this).find('ul').css({
"display": "block",
"margin-top": 0
});
},
function() {
$(this).find('ul').css({
"display": "none",
"margin-top": 0
});
}
);
});
codepen
使用mouseover()
函数触发点击。这样以前的点击事件就不会有危害了。用户可以使用悬停和点击/触摸。它将是移动友好。
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})
@user1079877和@BanAnanas的设置在旧的引导上工作得很好,但需要一些小的修正和保持菜单打开直到页面从浏览器中消失:
$('.dropdown').on('mouseenter', function () {
if (!$('.navbar-toggle').is(':visible')) {
$(this).addClass('open');
}
});
$('.dropdown').on('mouseleave', function () {
if ($('.navbar-toggle').is(':visible')) {
$(this).removeClass('open');
}
});
$('.navbar-toggle .navbar-item a').on('click', function (e) {
e.stopPropagation();
});
我提出的解决方案检测它是否不是触摸设备,并且navbar-toggle
(汉堡包菜单)不可见,并使父菜单项在悬停和上显示子菜单,并且跟随其链接单击。
也使margin-top为0,因为在某些浏览器中导航栏和菜单之间的间隙不允许您将鼠标悬停在子项目上
$(function(){
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if(!is_touch_device() && $('.navbar-toggle:hidden')){
$('.dropdown-menu', this).css('margin-top',0);
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>
$(function(){
$("#nav .dropdown").hover(
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
},
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>
您可以使用Jquery实现此功能:
$('.dropdown').on('mouseover', function(){
$(this).addClass('show');
$('.dropdown-menu').addClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'true');
});
$('.dropdown').on('mouseout', function(){
$(this).removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'false');
});
经过测试并正常工作
<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
<div class="container" style="width:100%;">
<div class="navbar-header" style="height:90px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
<img src="material/logo.png" width="160px;" alt="visoka">
</a>
<a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
<img src="material/logo.png" width="200px;">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
<ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">
<li><a href="index.html" style="font-family: Inter !important;">HOME</a></li>
<li><a href="About-Us.html" style="font-family: Inter !important;">ABOUT US</a></li>
<li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
<a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Projects.html#ongoing" style="font-family: Inter !important;">Ongoing Projects</a></li><br>
<li><a href="Projects.html#completed" style="font-family: Inter !important;">Completed Projects</a></li><br>
<li><a href="Projects.html#upcoming" style="font-family: Inter !important;">Upcoming Projects</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}
function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>
Bootstrap 5 with jquery version
只需将hoverable
类添加到下拉列表中,并将以下代码添加到主javascript文件
// Hoverable dropdown
$('.dropdown.hoverable').on({
mouseenter: function(){
var dropdown = $(this).children('.dropdown-menu');
if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
},
mouseleave: function(){
var dropdown = $(this).children('.dropdown-menu');
if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
}
});
- 当鼠标悬停在文本中的单词上时显示警报
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 手风琴可点击并悬停
- 悬停功能触发器
- 如何在鼠标悬停时在另一个图像上滑动图像.
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- css(或jQuery)悬停时淡入淡出
- jquery快速悬停问题
- 如何在悬停时流畅地更改单词
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- Flexslider导航按钮在悬停时不可见,带有橙色框
- 使用Javascript,如何显示<tr>在另一<tr>悬停时,隐藏第二个<tr>
- 在鼠标悬停时展开列表
- 导航菜单-悬停时的背景行为怪异
- OpenLayers在悬停时高亮显示功能,并在单击时选择
- jQuery悬停在没有鼠标悬停的情况下启动
- 鼠标悬停时如何居中放大背景图像
- 如何在悬停时显示文本而不移动页面上的内容