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错误，您也应该解决这个问题。

单击时隐藏Bootstrap导航折叠

1 个答案: