Javascript导航菜单不会关闭并使用replaceWith显示下拉菜单

Question

我在这里尝试找到一些解决方案，因为我有 2 个网站，其中 1 个使用这种方法运行良好，第二个给我带来了一些麻烦。

这是我的 HTML：

<header class="site-header header-style-1  nav-wide">
    <div class="sticky-header main-bar-wraper">
        <div class="main-bar bg-white p-t10">
            <div class="container">
                <div class="logo-header">
                    <div class="logo-header-inner logo-header-one">
                        <a href="home">
                            <img src="images/logo-dark.png" width="171" height="49" alt="" />
                        </a>
                    </div>
                </div>
                <!-- ETRA Nav -->
                <div class="extra-nav">
                    <div class="extra-cell">
                        <a href="javascript:;" class="vnav-btn">
                            <span class="fa fa-bars"></span>
                        </a>
                    </div>
                </div>

                <script>
                    $.get("nav.html", function(data) {
                        $("#nav-placeholder").replaceWith(data);
                    });

                </script>
                <div id="nav-placeholder">
                </div>

            </div>
        </div>
    </div>
</header>

这是我在“nav.html”中的菜单

    <!-- STYLE SWITCHER  ======= -->
<div class="nav-sidebar">
    <a href="javascript:;" class="vnav-close"></a>
    <div class="nav-siderbar-scroll">
        <div class="vertical-content-wrap">
            <div class="vertical-content-area vertical-centered">
                <!-- MAIN Vav -->
                <div class="vertical-nav">
                    <ul class=" nav navbar-nav">
                        <li class="active">
                            <a href="home">Home</a>
                        </li>
                        <li>
                            <a href="sobre">Abou Us</a>
                        </li>
                        <li>
                            <a href="produtos">PRODUTOS</a>
                        </li>
                        <li>
                            <a href="javascript:;">PLASTIC</a>
                            <ul class="sub-menu v-sub-menu">
                                <li><a href="a1" target="">A</a></li>
                                <li><a href="b2" target="">B</a></li>
                                <li><a href="v3" target="">V</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;">Marcas</a>
                            <ul class="sub-menu v-sub-menu">
                                <li><a href="a" target="_blank">A</a></li>
                                <li><a href="b" target="_blank">B</a></li>
                                <li><a href="v" target="_blank">C</a></li>
                                <li><a href="d" target="_blank">D</a></li>
                                <li><a href="e" target="_blank">E</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="catalogos">Catálogos</a>
                        </li>
                        <li>
                            <a href="onde_comprar">ONDE COMPRAR</a>
                        </li>
                        <li>
                            <a href="contactos">CONTACTOS</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- STYLE SWITCHER END ==== -->

完全是汉堡菜单！

问题是我的菜单在我恢复缓存默认值时工作，显示下拉菜单并关闭。 但是当我点击菜单元素或链接后，他会打开正确的页面，但之后下拉菜单消失并且菜单不会关闭。

Answer 1

我找到了解决办法：

我创建了一个调用 nav.html 并且在我的情况下需要是一个。

很抱歉，感谢您的帮助！