單擊時隱藏Bootstrap導航折疊

Question

通過從響應菜單中選擇一個類別（模板僅為一頁），我想在單擊時自動隱藏導航折疊。 由於模板只有一頁，因此也可以漫步以用作導航。 我尋求一種不影響它的解決方案，這是菜單的HTML代碼：

站點演示在這里： www.malouinternational.com/index2.html

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div  id="navbar" class="navbar-collapse collapse" >
            <ul class="nav navbar-nav navbar-left ">
                <li><a href="#" class="scroll-top" data-id="top">HOME</a></li>
                <li><a href="#" class="scroll-link" data-id="about">ABOUT</a></li>
                <li><a href="#" class="scroll-link" data-id="our-team">OUR TEAM</a></li>
                <li><a href="#" class="scroll-link" data-id="jewellery">JEWELLERY</a></li>
                <li><a href="#" class="scroll-link" data-id="trade">TRADE</a></li>
                <li><a href="#" class="scroll-link" data-id="social-corporate">SOCIAL & CORPORATE</a></li>
                <li><a href="#" class="scroll-link" data-id="press">PRESS</a></li>
                <li><a href="#" class="scroll-link" data-id="contact">CONTACT</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-left " style="color: #000; padding-left: 30px; padding-top: 15px;">
                <a href="https://www.facebook.com/MalouInternational"><i class="fa fa-facebook"></i></a>
                <a href="https://twitter.com/Malou_Int"><i class="fa fa-twitter  "></i></a>
                <a href="https://instagram.com/malouinternational/"><i class="fa fa-instagram  "></i></a>
                <a href="mailto:info@malouinternational.com"><i class="fa fa-envelope  "></i></a>
                <a href="katalog/index.html" target="_blank"><i class="fa fa-book"></i></a>
            </ul>
            <ul class="navbar-text navbar-right " style="color: #000; ">
                <li style="margin-left: 20px; font-size: 13px; display:inline;"><a href="#" class="scroll-link" data-id="contact">TR</a></li>
                <li style="margin-right:10px; font-size: 13px; display:inline;"><a href="#" class="scroll-link" data-id="contact">EN</a></li>
            </ul>

            <div id="sb-search" class="sb-search right" style="position: absolute; right: 70px; top: 0">
                <form>
                    <input class="sb-search-input" type="search" name="search" id="search">
                    <input class="sb-search-submit" type="submit" value="">
                    <span class="sb-icon-search"></span>
                </form>
            </div>

        </div>
    </div>
</nav>

Answer 1

加載jQuery和Bootstrap的順序很重要。 確保在 Bootstrap JavaScript 之前指定jQuery庫。

此外，由於服務器缺少文件，您還遇到了404錯誤，您也應該解決該錯誤。