一页网站上的启动切换菜单在点击时不会失效

Bootstrap toggle menu on one page site does not uncollapse when clicked

本文关键字：失效菜单网站启动一页更新时间：2024-01-08

我使用的是bootstrap，它是一个单页网站。当我需要为移动设备使用开关时。崩溃是有效的，但当我点击其中一个菜单时，我需要取消崩溃。

只需要它来交付项目。

有什么想法吗？

http://www.neevasoft.com/docasnovo

html

<header id="header" class="navbar-fixed-top main-nav" role="banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- Logo start -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#home">
                        <img class="img-responsive"  src="images'logo.png" alt="logo">
                    </a>   
                </div><!--/ Logo end -->
                <nav class="collapse navbar-collapse clearfix" >
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="page-scroll" href="#home">Home</a></li>
                        <li><a class="page-scroll" href="#services">A Empresa</a></li>
                        <li><a class="page-scroll" href="#historia">História</a></li>
                        <li><a class="page-scroll" href="#about">Participações</a></li>
                        <li><a class="page-scroll" href="#team">Renovada</a></li>
                        <li><a class="page-scroll" href="#contact">Contato</a></li>
                        <li><a class="page-scroll" href="acervo.html" onClick="window.location='acervo.html'">Acervo</a></li>
                        <!--li><a class="page-scroll" href="#contact">Contact</a></li-->
                    </ul>
                </nav><!--/ Navigation end -->
            </div><!--/ Col end -->
        </div><!--/ Row end -->
    </div><!--/ Container end -->
</header><!--/ Header end -->

您可以简单地向每个li添加以下属性：

<li data-toggle="collapse" data-target=".navbar-collapse">
  <a class="page-scroll" href="#home">Home</a>
</li>
....
....

这里不需要JavaScript代码。因为引导程序会处理它。

您可以从collapse.js使用.collapse('hide')。文档

jQuery(document).ready(function($) {
    $("li a.page-scroll").click(function() {
        $(this).closest(".navbar-collapse.in").collapse('hide');
    });
});