Javascript nav menu won't close and show dropdown menu using replaceWith

Question

I'm trying here to find some solution because I have 2 websites 1 of them is working well with this method the second one make me some troubles.

This is my 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>

This is my menu inside "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 ==== -->

Is fully hamburger menu!

The problem is my menu works in I restore cache defaults, show me the drop menu and close. But after I click come menu element or link, he will open the right page, but after that the drop down menu disappears and menu won't close.

Answer 1

I found the solution:

my foult I created a to call nav.html and need to be a in my case.

I'm sorry thanks for help!