I am in need of modifying the code below to allow for mousehover functionality with multiple levels in a Bootstrap 4 and JQuery menu. The current setup only works with single-level menus, as opening one level triggers the next (dropdown-submenu).
Here is my HTML code...
<nav class="navbar navbar-expand-lg navbar-default fixed-top">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/img/logo.png" alt="Brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-primary"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="item1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item 1 <small><i class="fas fa-angle-down ml-1"></i></small>
</a>
<ul class="dropdown-menu p-0" aria-labelledby="item1">
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li><a class="dropdown-item " href="">Item Level 1</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="item2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item 2 <small><i class="fas fa-angle-down ml-1"></i></small>
<div class="ripple-container"></div></a>
<ul class="dropdown-menu p-0" aria-labelledby="item2">
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li class="dropdown-submenu">
<a class="nav-link dropdown-toggle dropdown-item" href="#" role="button" id="itemlevel1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item Level 1 <small><i class="fas fa-angle-right"></i></small>
</a>
<ul class="dropdown-menu p-0" aria-labelledby="itemlevel1">
<li><a class="dropdown-item " href="">Item Level 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item ">
<a class="nav-link" href="">Item 3
</a>
</li>
</ul>
</div>
</div>
</nav>
And this is my JS code...
//Dropdown hover
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const $dropdownSubMenu = $(".dropdown-submenu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
$this.find($dropdownSubMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
$this.find($dropdownSubMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});