[英]Dropdown hover enable/disable on window resize
我希望仅当窗口大于767px时,才能在悬停时打开下拉列表。 我正在尝试在页面加载和窗口调整大小时使用宽度大小条件调用函数。 enableHover()函数仅在页面加载时起作用,而在窗口调整大小时不起作用。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">dropdown link</a>
<a class="dropdown-item" href="#">dropdown link</a>
<a class="dropdown-item" href="#">dropdown link</a>
</div>
</li>
</ul>
</div>
</nav>
jQuery(document).ready(function($) {
//call dropdown hover and on load & resize
$( window ).resize(function() {
enableHover();
});
enableHover();
});
//emable hover when window > 767px
function enableHover() {
if ($(window).width() > 767) {
$('nav.navbar 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);
});
}
}
您需要取消绑定悬停操作。 您的.resize
函数正在运行,但没有任何操作可从下拉菜单中删除悬停操作。 添加类似的内容:
function enableHover() {
if ($(window).width() > 767) {
$('nav.navbar 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);
});
} else {
$('nav.navbar li.dropdown').unbind('mouseenter mouseleave')
}
}
这是一个有效的codepen:
https://codepen.io/egerrard/pen/qPyYwR
或更简单的解决方案是只使用CSS:
@media (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
}
@media (max-width: 767px) {
.dropdown:hover .dropdown-menu
display: none;
margin-top: auto;
}
在这里查看实际操作:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.