如何延迟删除下拉菜单Bootstrap 4的类？
我试图在导航栏上切换一个类切换，但是当您移动鼠标时，下拉菜单会快速删除该类并隐藏菜单。 我认为它需要的只是延迟上课，但课程的表现仍然是即时的。 以下是hover问题http://sofzh.miximages.com/jquery/o8ccCn9.gifv的屏幕截图
是否有手动方式来编写切换？
Codepen： https ：//codepen.io/JacobLett/pen/jaaQYG ？编辑= 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，但由于下拉列表是绝对位置，因此它也无法正常工作。
您可以使用本机JavaScript setTimeout()方法 …
$(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() { setTimeout(function() { $(this).removeClass("show"); }, 3000); // delay the removal of the 'show' class for 3 seconds }); // document ready });
好吧，在尝试了几个javascript选项之后，我想起了一个好的旧suckerfish菜单，你将下拉菜单向上移动几个像素，这样hover状态不会因为你在锚点触发器和菜单本身之间的间隙上空盘旋而破坏。
所以我保持我的脚本相同，但只在桌面宽度上解雇它，然后调整我的CSS以删除hover间隙。
最终解决方案： https ： //codepen.io/JacobLett/pen/jaaQYG
HTML
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 });