Есть ли способ в jquery иметь родительскую привязку раскрывающегося списка меню, чтобы отложить закрытие после выхода курсора мыши из меню / подменю?Я использую bootstrap 4 для стилизации и пробовал разные функции jquery mouseenter и mouseleave, чтобы вызвать задержку при выходе из мыши.Я даже попробовал только переходы стиля, и он продолжает закрываться слишком быстро.
Пример.Меню имеет выпадающее меню с 12 пунктами.Элемент подменю родительского выпадающего меню содержит список всего из 2 пунктов.Если пользователь пытается перейти от нижнего родительского пункта меню к верхнему подменю и мышь выходит из тега привязки для родительского выпадающего меню, весь DOM для этого выпадающего меню закрывается.У кого-нибудь, с примером, показанным ниже, есть предложение или пример кода, который я могу использовать, чтобы исправить мою проблему?
К вашему сведению, ниже у меня есть попытка jquery, и класс .open просто выполняет стильdisplay: блок для сохранения родительского элемента открытым.
<div class="container">
<div id="shoppingNavigation" class="row">
<div style="padding-left: 0;" class="col-xs-12 col-md-3">
<div class="dropdown w-100">
<button type="button" data-toggle="dropdown-menu" class="dropbtnmin-height btn btn-primary
dropdown-toggle">Departments</button>
<div class="dropdown-content" style="min-height:
486px; overflow-y:none; padding-right: 0;
padding-bottom: 0;">
<div class="row">
<div class="col-xs-12 col-md-2">
<div class="d-flex flex-column nav
nav-tabs">
<!--Shopping-->
<!---->
<ul class="mainDropDown">
<li data-submenu-id="shopping" class="dropdown-submenu" role="menu">
<a tabindex="1" style="width: 175px" href="searchResults.html" id="shoppingMenuLabel"
class="dropdown-item">
<div class="fa fa-tags">
</div>Shopping
</a>
<ul class="dropdown-menu">
<li data-submenu-id="appleStore" class="dropdown-submenu">
<a tabindex="1" href="#" id="appleStoreMenuLabel">
Apple Store</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html" id="apple1">iPods
</a></li>
<li><a href="searchResults.html" id="apple2">iPod
Accessories
</a></li>
<li><a href="searchResults.html" id="apple3">Watches</a></li>
<li><a href="searchResults.html" id="apple4">Mac
Systems</a></li>
<li><a href="searchResults.html" id="apple5">iPads</a></li>
<li><a href="searchResults.html" id="apple6">Shop
All
Apple
Store</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="babyMenuLabel">
Baby</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html" id="baby1">Clothing</a></li>
<li><a href="searchResults.html" id="baby2">Feeding</a></li>
<li><a href="searchResults.html" id="baby3">Gear
</a></li>
<li><a href="searchResults.html" id="baby4">Maternity</a></li>
<li><a href="searchResults.html" id="baby5">Nursery
</a></li>
<li><a href="searchResults.html" id="baby6">Care
& Safety</a></li>
<li><a href="searchResults.html" id="baby7">Shop
All Baby</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="booksMenuLabel">
Books</a>
<ul class="dropdown-menu
dropup">
<li><a href="searchResults.html" id="books1">Autobiography
&
Biography</a></li>
<li><a href="searchResults.html" id="books2">Cooking
</a></li>
<li><a href="searchResults.html" id="books3">Health
&
Fitness</a></li>
<li><a href="searchResults.html" id="books4">History</a></li>
<li><a href="searchResults.html" id="books5">Humor
</a></li>
<li><a href="searchResults.html" id="books6">Juvenile
NonFiction</a></li>
<li><a href="searchResults.html" id="books7">Juvenile
Fiction</a></li>
<li><a href="searchResults.html" id="books8">Religion</a></li>
<li><a href="searchResults.html" id="books9">Social
Science</a></li>
<li><a href="searchResults.html" id="books10">Sports
&
Recreation</a></li>
<li><a href="searchResults.html" id="books11">Shop
All
Books</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="electronicsMenuLabel">
Electronics</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="fashionAccMenuLabel">
<a tabindex="1" href="searchResults.html">
Fashion
Accessories</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="giftBasketsMenuLabel">
<a tabindex="1" href="searchResults.html">
Gift Baskets</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="homeGardenMenuLabel">
<a tabindex="1" href="searchResults.html">
Home & Garden</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="jewelryMenuLabel">
<a tabindex="1" href="searchResults.html">
Jewelry</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="moviesMenuLabel">
<a tabindex="1" href="searchResults.html">
Movies</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="musicMenuLabel">
<a tabindex="1" href="searchResults.html">
Music</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="officeProductsMenuLabel">
Office Products</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="onSaleNowMenuLabel">
<a tabindex="1" href="searchResults.html">
On Sale Now!</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
стили -
<style>
li.dropdown-submenu a#shoppingMenuLabel {
transition-timing-function: ease-in-out 1s;
-moz-transition-timing-function: ease-in-out 1s;
-o-transition-timing-function: ease-in-out 1s;
-webkit-transition-timing-function: ease-in-out 1s;
transition-duration: 1s;
}
.fade {
opacity: 1;
transition: opacity .40s ease-in-out;
-moz-transition: opacity .40s ease-in-out;
-webkit-transition: opacity .40s ease-in-out;
}
#imageContainer img {
width: 427px;
background-repeat: no-repeat;
}
.dropdown-submenu {
position: initial;
}
ul.dropdown-menu {
transition-timing-function: ease-in 2s;
-moz-transition-timing-function: ease-in 2s;
-o-transition-timing-function: ease-in 2s;
-webkit-transition-timing-function: ease-in s;
transition-duration: 1s;
}
ul.dropdown-menu > li > a.maintainHover {
transition-timing-function: ease-out .50s;
-moz-transition-timing-function: ease-out .50s;
-o-transition-timing-function: ease-out .50s;
-webkit-transition-timing-function: ease-out .50s;
transition-duration: .50s;
}
ul.dropdown-menu li.dropdown-submenu {
transition-timing-function: ease-out 3s;
-moz-transition-timing-function: ease-out 3s;
-o-transition-timing-function: ease-out 3s;
-webkit-transition-timing-function: ease-out 3s;
transition-duration: 3s;
}
ul.dropdown-menu li.dropdown-submenu a:hover {
font-weight: bold;
}
li.dropdown-submenu a ul.dropdown-menu {
transition: ease-out;
}
.dropdown-content a:hover {
background: transparent;
font-weight: bold;
}
li.dropdown-submenu a:hover {
font-weight: bold !important;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 95%;
margin-top: -6px;
margin-left: -1px;
padding-left: 10px;
border: 0;
border-left: 2px solid #f1f1f1 !important;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: searchResults.htmlccc;
margin-top: 5px;
margin-right: 0px;
}
.dropdown-submenu:hover>a:after {
border-left-color: searchResults.htmlfff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
border: 0;
}
ul.mainDropDown {
margin: 0;
padding: 0;
}
ul.mainDropDown li {
list-style: none;
}
ul.dropdown-menu {
width: 285px;
}
li.dropdown-submenu > a {
display: block;
}
@media only screen and (max-width: 800px) {
ul.dropdown-menu {
width: 150px;
}
}
.gridList a {
margin-right: 10px;
}
.gridList a:last-child {
margin-right: 0;
}
.listView {
width: 100%;
max-width: 100%;
flex: 1 1 100%;
text-align: center;
margin-bottom: 30px;
}
.listView:nth-child(3) {
margin-bottom: 0;
}
</style>
$(document).ready(function(){
$("a").on("mouseover", function () {
clearTimeout(timer);
openSubmenu();
}).on("mouseleave", function () {
timer = setTimeout(
closeSubmenu, 3000);
});
function openSubmenu() {
$(".dropdown-menu").addClass("open");
}
function closeSubmenu() {
$(".dropdown-menu").removeClass("open");
}
});