Question

我正在使用bootstrap 4.0.3设置mmenu 8.0.4，但如果我删除了bootstrap及其包装程序，则无法正常工作，但是添加了bootstrap后，它却停止了工作，我使用了cdnjs.com的所有资源

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.0.4/mmenu.css"
        integrity="sha256-/bVBe6VX7bsAL1cn6HNj6XMyYJyHG2S2kxJ8Vt3e11A=" crossorigin="anonymous" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.0.4/wrappers/bootstrap/mmenu.bootstrap.css"
        integrity="sha256-elERaI/Iz8isV+AYaolS0mHroo536cHkLqYYFwjxLpM=" crossorigin="anonymous" />
</head>

<body>
    <div id="my-page">
        <div id="my-header">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Navbar</a>

                <a href="#my-menu">
                    <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>
                </a>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</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">
                                Dropdown
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div id="my-content">
            <h1>The title</h1>
            <p>Some content</p>
        </div>
        <div id="my-footer">
            <p>Footer</p>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"
        integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"
        integrity="sha256-fzFFyH01cBVPYzl16KT40wqjhgPtq6FFUB6ckN2+GGw=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.0.4/mmenu.js"
        integrity="sha256-G+3H8SSagK+4H8HwxqdKJL3TTumB6Fc9/XGUcv2Abd4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.0.4/wrappers/bootstrap/mmenu.bootstrap.js"
        integrity="sha256-37t2xdjSmaH5NFigo+NcmubzDrEse4L8jFmpIS3hwW8=" crossorigin="anonymous"></script>
    <script>
        Mmenu.configs.classNames.selected = "active";
        Mmenu.configs.offCanvas.page.selector = "#my-page";

        document.addEventListener(
            "DOMContentLoaded", () => {
                const menu = new Mmenu("#my-menu", {
                    slidingSubmenus: false,
                    wrappers: ["bootstrap4"]
                });

            }
        );
    </script>
</body>

</html>

它应该与bootstrap 4一起使用，但不是在单击Navbar bootstrap上的bootstrap折叠按钮时打开它自己的菜单

jQuery mmenu 8.0.4与Bootstrap 4.0.3集成

0 个答案: