如何延迟删除下拉菜单Bootstrap 4的类? [英] How to delay the removal of a class for a dropdown mega menu Bootstrap 4?
本文介绍了如何延迟删除下拉菜单Bootstrap 4的类?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试通过导航栏切换来切换类，但是当您移动鼠标时，下拉菜单会快速删除该类并隐藏该菜单.我认为这只是延迟删除班级，但是班级展示仍然可以即时进行.这是悬停问题的屏幕截图 https://i.imgur.com/o8ccCn9.gifv
I am trying to toggle a class on a navbar toggle but when you move your mouse the the dropdown menu it quickly removes the class and hides the menu. I think what it needs is a delay on just the removal of the class but the showing of the class can still be instant. Here is a screenshot of the hover issue https://i.imgur.com/o8ccCn9.gifv
是否有手动方式编写切换开关?
Is there a manual way to write a toggle?
Codepen: https://codepen.io/JacobLett/pen/jaaQYG?editors = 0110
这是到目前为止的脚本
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
// when you hover a toggle show its dropdown menu
$(".navbar .dropdown-toggle").hover(function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
});
// hide the menu when the mouse leaves the dropdown
$( ".navbar .dropdown-menu" ).mouseleave(function() {
$(this).removeClass("show");
});
// document ready
});
更新我想.hover没有考虑子元素.如果这样做，我的代码将起作用.因此，我尝试使用mouseenter和mouseleave，但是由于下拉列表的位置是绝对的，因此它也不起作用.
Update I guess .hover doesn't take into consideration the child elements. If it did my code would work. So I tried mouseenter and mouseleave but since the dropdown is position absolute it doesn't work with this either.
推荐答案
好吧，在尝试了一些javascript选项之后，我还记得旧的傻瓜菜单，您可以将下拉菜单上移几个像素，以使悬停状态不会中断当您将鼠标悬停在锚定触发器和菜单本身之间的空隙上时.
Ok, after trying a few javascript options I remembered the good old suckerfish menu which had you move the dropdown menu up a few pixels so the hover state would not break as you hovered over the gap between the anchor trigger and the menu itself.
因此，我保持脚本不变，但只在桌面宽度上触发了脚本，然后调整了CSS以消除悬停间隙.
So I kept my script the same but fired it only on desktop widths and then adjusted my CSS to remove the hover gap.
最终解决方案: https://codepen.io/JacobLett/pen/jaaQYG
HTML
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Mega Dropdown</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category 1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<a href="">
<img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid">
</a>
<p class="text-white">Short image call to action</p>
</div>
<!-- /.col-md-4 -->
</div>
</div>
<!-- /.container -->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category 2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<a href="">
<img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid">
</a>
<p class="text-white">Short image call to action</p>
</div>
<!-- /.col-md-4 -->
</div>
</div>
<!-- /.container -->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category 3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<a href="">
<img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid">
</a>
<p class="text-white">Short image call to action</p>
</div>
<!-- /.col-md-4 -->
</div>
</div>
<!-- /.container -->
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
CSS
/* adds some margin below the link sets */
.navbar .dropdown-menu div[class*="col"] {
margin-bottom:1rem;
}
.navbar .dropdown-menu {
border:none;
background-color:#0060c8!important;
}
/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {
/* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
padding-top:0px;
padding-bottom:0px;
}
/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item {
padding:.5rem .5rem;
margin:0 .25rem;
}
/* makes the dropdown full width */
.navbar .dropdown {position:static;}
.navbar .dropdown-menu {
width:100%;
left:0;
right:0;
/* height of nav-item */
top:45px;
}
/* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
display:block!important;
}
.navbar .dropdown-menu {
border: 1px solid rgba(0,0,0,.15);
background-color: #fff;
}
}
JS
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
// breakpoint and up
$(window).resize(function(){
if ($(window).width() >= 980){
// when you hover a toggle show its dropdown menu
$(".navbar .dropdown-toggle").hover(function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
});
// hide the menu when the mouse leaves the dropdown
$( ".navbar .dropdown-menu" ).mouseleave(function() {
$(this).removeClass("show");
});
// do something here
}
});
// document ready
});
这篇关于如何延迟删除下拉菜单Bootstrap 4的类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
