如何在 Bootstrap v4 中使用多级下拉子菜单实现导航栏下拉悬停？

Question

我需要调整以下代码，以便鼠标悬停在具有 Bootstrap 4 和 JQuery 的菜单中用于多个级别。当菜单只有一个级别时鼠标悬停有效，但在打开第一级后它也会打开第二级（下拉子菜单）。

这是我的HTML代码...

<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>

这是我的 JS 代码...

//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");
        }
    });

Answer 1

解决方法：

//Dropdown hover
const $dropdown = $(".navbar-nav > .dropdown");
const $dropdownToggle = $(".navbar-nav > .dropdown > .dropdown-toggle");
const $dropdownMenu = $(".navbar-nav > .dropdown > .dropdown-menu");

const $dropdown2 = $(".dropdown-submenu");
const $dropdownToggle2 = $(".dropdown-submenu > .dropdown-toggle");
const $dropdownMenu2 = $(".dropdown-submenu > .dropdown-menu");

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);
            },
            function() {
                const $this = $(this);
                $this.removeClass(showClass);
                $this.find($dropdownToggle).attr("aria-expanded", "false");
                $this.find($dropdownMenu).removeClass(showClass);
            }
        );
        $dropdown2.hover(
            function() {
                const $this = $(this);
                $this.addClass(showClass);
                $this.find($dropdownToggle2).attr("aria-expanded", "true");
                $this.find($dropdownMenu2).addClass(showClass);
            },
            function() {
                const $this = $(this);
                $this.removeClass(showClass);
                $this.find($dropdownToggle2).attr("aria-expanded", "false");
                $this.find($dropdownMenu2).removeClass(showClass);
            }
        );
    } else {
        $dropdown.off("mouseenter mouseleave");
        $dropdown2.off("mouseenter mouseleave");

        $(function () {
            // Multi Level dropdowns on Click for Mobile
            $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function (event) {
                event.preventDefault();
                event.stopPropagation();

                $(this).siblings().toggleClass("show");


                if (!$(this).next().hasClass('show')) {
                    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
                }
                $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
                    $('.dropdown-submenu .show').removeClass("show");
                });

            });
        })
    }
});